{"id":22310852,"url":"https://github.com/azarattum/chartsapp","last_synced_at":"2025-07-26T06:14:35.179Z","repository":{"id":116104009,"uuid":"174980300","full_name":"Azarattum/ChartsApp","owner":"Azarattum","description":"Project for Telegram's contest - a charts web application.","archived":false,"fork":false,"pushed_at":"2019-07-30T12:03:46.000Z","size":2218,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"webgl","last_synced_at":"2025-03-26T02:13:26.593Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://cu.interkot.ru/azarattum/chartsgl/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Azarattum.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-03-11T10:48:37.000Z","updated_at":"2020-04-09T17:17:23.000Z","dependencies_parsed_at":null,"dependency_job_id":"57387031-4127-456f-90d7-8554badc1595","html_url":"https://github.com/Azarattum/ChartsApp","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Azarattum/ChartsApp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Azarattum%2FChartsApp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Azarattum%2FChartsApp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Azarattum%2FChartsApp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Azarattum%2FChartsApp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Azarattum","download_url":"https://codeload.github.com/Azarattum/ChartsApp/tar.gz/refs/heads/webgl","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Azarattum%2FChartsApp/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267127943,"owners_count":24040154,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-26T02:00:08.937Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-03T21:16:23.245Z","updated_at":"2025-07-26T06:14:35.157Z","avatar_url":"https://github.com/Azarattum.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Charts Application\r\nJavascript web application developed by [Azarattum](https://github.com/Azarattum) for Telegram's \"Chart Coding Competition\". It supports line charts with 1 or 2 Y axes, bar charts and percentage stacked area charts. This is a webgl version for \"Stage 2\". The original one can be found [here](https://github.com/Azarattum/ChartsApp/tree/master).\r\n\r\n## Features:\r\n  - Incredible performance thanks to webgl\r\n  - Attention to details (such and '%' on percentage Y axis)\r\n  - Everything is carefully animated\r\n  - Support iOS web app\r\n  - All chart related things are wrapped into class ChartElement. So, it can be easily used multiple times on multiple pages\r\n  - ChartElement is fully customizable. You can change colors, fonts, margins without modifying the actual source code\r\n  - ChartElement can automatically adapt for rescaled resolution using update function\r\n  - Animtions' speeds are easily customizable\r\n  - Hold to uncheck other graphs\r\n  - Nice loading screen\r\n  - Y axis from minimum value\r\n  - Tooltips showing graph values and percentage (for certain charts)\r\n\r\n## Technical Features:\r\n  - EVERYTHING was written from scratch, no libraries were used\r\n  - Nice webgl wrapper with custom shader preprocessor\r\n  - All charts are drawn using webgl\r\n  - All charts' points are processed only while the initial loading\r\n  - Chart's data sends to shaders only once. Further manipulation are done using transformation matrix and other uniforms\r\n  - Vertices are draw only in user's view\r\n  - Calculations are performed only in user's view\r\n  - Only one iteration through visible points to find: start, end, maximum and selection\r\n  - Chart redraws only when modified\r\n  - Render is bind to requestAnimationFrame\r\n  - All shaders' and charts' sources are loaded via AJAX\r\n  - Code was written using ES6 with OOP structure\r\n  - Most of functions have documentation\r\n  - Hard parts of code are carefully commented\r\n  - Theme changing was done using pure CSS (except charts' backgrounds)\r\n  \r\n\r\n### Examples:\r\nEasy to create new chart:\r\n```javascript\r\nvar chartElement = new ChartElement(container, shaders);\r\n```\r\nwhere \r\n  - container - DOM element container for a new chart\r\n  - shaders - Object that contains shader source, like: {line: [], bar: [], area: [], layout: []}. Sources can be loaded however you want.\r\n\r\nNow, set the data:\r\n```javascript\r\nchartElement.chart = data;\r\n```\r\nwhere \r\n  - data - JSON parsed object with provided format\r\n\r\nThen add some styles:\r\n```javascript\r\nchartElement.style = {\r\n    background: \"#FFF\",\r\n    text: \"#000\",\r\n    font: \"inherit\",\r\n    lowlight: 0.1,\r\n    border: \"1px\",\r\n    margin: \"8px\",\r\n    dates: \"24px\",\r\n    preview: \"48px\",\r\n    select: \"48px\"\r\n};\r\n```\r\nChartElement can be configurated deeper via accessing sub classes such as ChartDrawer, GraphDrawer, LayoutDrawer, SelectionDrawer.\r\n\r\nAnd the final touch, set the custom title to our chart:\r\n```javascript\r\nchartElement.title = \"Title\";\r\n```\r\n\r\nNow, we can render it:\r\n```javascript\r\nchartElement.render();\r\n```\r\n\r\nAlso easily update after resizing:\r\n```javascript\r\nchartElement.update();\r\n```\r\n\r\nFor more information look at the source code.\r\n\r\n### Demo:\r\nThe working demo is available [here](http://cu.interkot.ru/azarattum/chartsgl).\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazarattum%2Fchartsapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fazarattum%2Fchartsapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazarattum%2Fchartsapp/lists"}