{"id":19628696,"url":"https://github.com/styopdev/graphart","last_synced_at":"2025-04-28T06:31:13.793Z","repository":{"id":29898900,"uuid":"33444556","full_name":"styopdev/graphart","owner":"styopdev","description":"Flat design, lightweight and high performance library for graphs and charts. [experimental]","archived":false,"fork":false,"pushed_at":"2017-05-06T13:01:59.000Z","size":71,"stargazers_count":18,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2023-12-13T03:10:48.189Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/styopdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-04-05T15:06:47.000Z","updated_at":"2023-11-17T00:55:36.000Z","dependencies_parsed_at":"2022-08-23T04:50:17.111Z","dependency_job_id":null,"html_url":"https://github.com/styopdev/graphart","commit_stats":null,"previous_names":[],"tags_count":0,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styopdev%2Fgraphart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styopdev%2Fgraphart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styopdev%2Fgraphart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styopdev%2Fgraphart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/styopdev","download_url":"https://codeload.github.com/styopdev/graphart/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224099631,"owners_count":17255578,"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","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-11-11T11:56:29.876Z","updated_at":"2024-11-11T11:56:33.686Z","avatar_url":"https://github.com/styopdev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"#### Dont use library in production.\nGraphart is HTML5/JavaScript charting library based on the Canvas, which allows you to \ncreate rich charts that are completely responsive and work in all browsers.\nNowadays, data visualization and analysis is now an key factor of business processes. That makes it all the more important to choose the right kind of JavaScript Charting library that best matches your needs.\n\n## Benefits:\n\n\t-  Modern flat design\n\t-  High performance\n\t-  Easy to integrate\n\t-  Analytical experience\n\n#### Spider graph:\n###### Demo:\n![Graph Chart](http://content.screencast.com/users/johannesMt/folders/Jing/media/5c4c1fb5-cad9-4aaf-b23b-c4968b783fc7/2015-06-29_1313.png)\n###### Usage:\n``` \n    $(function() {\n    \tvar stat  = [\n    \t\t[{'name':'2011', 'color' : '#03C9A9'},\n    \t\t\t{'type':'Java', 'value':50000},\n    \t\t\t{'type':'JS',   'value':55000},\n    \t\t\t{'type':'C',  'value':40000},\n    \t\t\t{'type':'Objc', 'value':60000},\n    \t\t\t{'type':'C#',   'value':63000},\n    \t\t\t{'type':'PHP',  'value':65000},\n    \t\t  \t\n    \t\t], \n    \t\t[{'name':'2012', 'color' : '#F64747'},\n    \t\t\t{'type':'Java', 'value':45000},\n    \t\t\t{'type':'JS',   'value':68000},\n    \t\t\t{'type':'C',  'value':43000},\n    \t\t\t{'type':'Objc', 'value':40000},\n    \t\t\t{'type':'C#',   'value':50000},\n    \t\t\t{'type':'PHP',  'value':37000},\n    \t\t], \n    \t\t[{'name':'2013', 'color' : '#19B5FE'},\n    \t\t\t{'type':'Java', 'value':24000},\n    \t\t\t{'type':'JS',   'value':77000},\n    \t\t\t{'type':'C',  'value':29000},\n    \t\t\t{'type':'Objc', 'value':20000},\n    \t\t\t{'type':'C#',   'value':48000},\n    \t\t\t{'type':'PHP',  'value':21000},\n      \t\t],\n      \t\t[{'name':'2014', 'color' : '#6C7A89'},\n    \t\t\t{'type':'Java', 'value':65000},\n    \t\t\t{'type':'JS',   'value':70000},\n    \t\t\t{'type':'C',  'value':55000},\n    \t\t\t{'type':'Objc', 'value':60000},\n    \t\t\t{'type':'C#',   'value':37000},\n    \t\t\t{'type':'PHP',  'value':55000},\n      \t\t]\n      \t];\n        \n    \tvar options = {\n    \t\tstrokeStyle : '#E9E9E9',\n    \t\tshadowColor : '#2ECC71',\n    \t\toffset : 0,\n    \t\tdelimeterCount : 2,\n    \t\tlineWidth : 1\n    \t};\n    \n    \tdrawSpiderGraph(\"#mycanvas\", stat, options);\n    });\n```\n\n#### Linear graph:\n###### Demo: \n![Line Graph](http://content.screencast.com/users/johannesMt/folders/Jing/media/b9480293-6e1d-442b-88ff-4c215b0ea3fa/2015-06-29_1319.png)\n![Line Graph](http://content.screencast.com/users/johannesMt/folders/Jing/media/ce454fd4-e195-4862-83c8-9e442896b0f8/2015-06-29_1317.png)\n###### Usage:\n```\nvar data = { values:[\n                { X: \"January\", Y: 8 },\n                { X: \"February\", Y: 2 },\n                { X: \"March\", Y: 4 },\n                { X: \"April\", Y: 3 },\n                { X: \"May\", Y: 13},\n                { X: \"June\", Y: 15 },\n                { X: \"July\", Y: 21 },\n                { X: \"August\", Y: 19 },\n                { X: \"September\", Y: 25 },\n                { X: \"October\", Y: 15 },\n                { X: \"November\", Y: 18 },\n                { X: \"December\", Y: 2 }\n            ]};\n            var previousData = { values:[\n                { X: \"January\", Y: 4 },\n                { X: \"February\", Y: 9 },\n                { X: \"March\", Y: 6 },\n                { X: \"April\", Y: 1 },\n                { X: \"May\", Y: 8},\n                { X: \"June\", Y: 6.8 },\n                { X: \"July\", Y: 12 },\n                { X: \"August\", Y: 14 },\n                { X: \"September\", Y: 22 },\n                { X: \"October\", Y: 17 },\n                { X: \"November\", Y: 11 },\n                { X: \"December\", Y: 9 }\n            ]};\n\n            var options = {\n                xPadding : 30,\n                yPadding : 30,\n\t\t\t\tlineWidth : 2,\n\t\t\t\tcurrCircleColor : '#2A4269',\n\t\t\t\tprevCircleColor :  'rgba(101, 181, 178, 0.5)',\n\t\t\t\tcurrColor : '#2A4269',\n\t\t\t\tprevColor : 'rgba(101, 181, 178, 0.8)'\t\t\t\n            }\n\n            $(function() {\n                drawLinearGraph(\"#linear-graph\", data, previousData, options)\n            });\n```\n\n#### Pie chart:\n###### Demo:\n![Pie Chart](http://content.screencast.com/users/johannesMt/folders/Jing/media/f8de6e27-0362-4699-9796-a2b9e41c2e2e/2015-06-29_1322.png)\n![Pie Chart](http://content.screencast.com/users/johannesMt/folders/Jing/media/b7a9189a-dbea-4a0b-a518-3518d556cb09/2015-06-30_1540.png)\n###### Usage:\n```\n    var pieData =[\n        {\"size\" : 42, \"title\" : \"Russia\", \"color\": \"#FF0000\"},\n        {\"size\" : 21, \"title\" : \"Canada\", \"color\": \"#FF9934\"},                \n        {\"size\" : 19, \"title\" : \"United States\", \"color\": \"#F778A1\"},\n        {\"size\" : 18, \"title\" : \"China\", \"color\": \"#CC0001\"}\n    ];\n\n    var options = {\n        radius          : 100,\n        fillStyle       : '#CCDCCD',\n        borderColor     : '#C6DBEF',\n        borderLineWidth : 1\n    }\n\n    drawPieChart(pieData, options);\n    \n```\n#### Circle graphs:\n###### Demo:\n![Circle Graph](http://content.screencast.com/users/johannesMt/folders/Jing/media/c60dd1c8-b1bd-471e-b296-4a96ac5a46bb/2015-06-29_1327.png)\n![Circle Graph](http://content.screencast.com/users/johannesMt/folders/Jing/media/b5a9bf3b-e9c2-42f0-9593-1495bb04daaa/2015-06-29_1330.png)\n###### Usage:\n```\n\t$(function() {\n\t\tvar max   = 1000; \n\t\tvar stat  = 750;\n\t\tvar options = {\n\t\t\tradius : 90,\n\t\t\tinnerLineWidth : 24,\n\t\t\touterLineWidth : 22,\n\t\t\tinnerFillColor : \"#FFFFFF\",\n\t\t\touterFillColor : \"#2ECC71\",\n\t\t\ttextColor\t   : \"#FFFFFF\",\n\t\t\tshadowColor\t   : \"#34495E\"\n\t\t}\n\n\t\tdrawCircleGraph(\"#circle-graph\", stat, max, options);\n\t});\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstyopdev%2Fgraphart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstyopdev%2Fgraphart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstyopdev%2Fgraphart/lists"}