Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/styopdev/graphart
Flat design, lightweight and high performance library for graphs and charts. [experimental]
https://github.com/styopdev/graphart
Last synced: about 1 month ago
JSON representation
Flat design, lightweight and high performance library for graphs and charts. [experimental]
- Host: GitHub
- URL: https://github.com/styopdev/graphart
- Owner: styopdev
- License: mit
- Created: 2015-04-05T15:06:47.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-05-06T13:01:59.000Z (over 7 years ago)
- Last Synced: 2023-12-13T03:10:48.189Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 69.3 KB
- Stars: 18
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
#### Dont use library in production.
Graphart is HTML5/JavaScript charting library based on the Canvas, which allows you to
create rich charts that are completely responsive and work in all browsers.
Nowadays, 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.
## Benefits:
- Modern flat design
- High performance
- Easy to integrate
- Analytical experience
#### Spider graph:
###### Demo:
###### Usage:
```
$(function() {
var stat = [
[{'name':'2011', 'color' : '#03C9A9'},
{'type':'Java', 'value':50000},
{'type':'JS', 'value':55000},
{'type':'C', 'value':40000},
{'type':'Objc', 'value':60000},
{'type':'C#', 'value':63000},
{'type':'PHP', 'value':65000},
],
[{'name':'2012', 'color' : '#F64747'},
{'type':'Java', 'value':45000},
{'type':'JS', 'value':68000},
{'type':'C', 'value':43000},
{'type':'Objc', 'value':40000},
{'type':'C#', 'value':50000},
{'type':'PHP', 'value':37000},
],
[{'name':'2013', 'color' : '#19B5FE'},
{'type':'Java', 'value':24000},
{'type':'JS', 'value':77000},
{'type':'C', 'value':29000},
{'type':'Objc', 'value':20000},
{'type':'C#', 'value':48000},
{'type':'PHP', 'value':21000},
],
[{'name':'2014', 'color' : '#6C7A89'},
{'type':'Java', 'value':65000},
{'type':'JS', 'value':70000},
{'type':'C', 'value':55000},
{'type':'Objc', 'value':60000},
{'type':'C#', 'value':37000},
{'type':'PHP', 'value':55000},
]
];
var options = {
strokeStyle : '#E9E9E9',
shadowColor : '#2ECC71',
offset : 0,
delimeterCount : 2,
lineWidth : 1
};
drawSpiderGraph("#mycanvas", stat, options);
});
```
#### Linear graph:
###### Demo:
###### Usage:
```
var data = { values:[
{ X: "January", Y: 8 },
{ X: "February", Y: 2 },
{ X: "March", Y: 4 },
{ X: "April", Y: 3 },
{ X: "May", Y: 13},
{ X: "June", Y: 15 },
{ X: "July", Y: 21 },
{ X: "August", Y: 19 },
{ X: "September", Y: 25 },
{ X: "October", Y: 15 },
{ X: "November", Y: 18 },
{ X: "December", Y: 2 }
]};
var previousData = { values:[
{ X: "January", Y: 4 },
{ X: "February", Y: 9 },
{ X: "March", Y: 6 },
{ X: "April", Y: 1 },
{ X: "May", Y: 8},
{ X: "June", Y: 6.8 },
{ X: "July", Y: 12 },
{ X: "August", Y: 14 },
{ X: "September", Y: 22 },
{ X: "October", Y: 17 },
{ X: "November", Y: 11 },
{ X: "December", Y: 9 }
]};
var options = {
xPadding : 30,
yPadding : 30,
lineWidth : 2,
currCircleColor : '#2A4269',
prevCircleColor : 'rgba(101, 181, 178, 0.5)',
currColor : '#2A4269',
prevColor : 'rgba(101, 181, 178, 0.8)'
}
$(function() {
drawLinearGraph("#linear-graph", data, previousData, options)
});
```
#### Pie chart:
###### Demo:
###### Usage:
```
var pieData =[
{"size" : 42, "title" : "Russia", "color": "#FF0000"},
{"size" : 21, "title" : "Canada", "color": "#FF9934"},
{"size" : 19, "title" : "United States", "color": "#F778A1"},
{"size" : 18, "title" : "China", "color": "#CC0001"}
];
var options = {
radius : 100,
fillStyle : '#CCDCCD',
borderColor : '#C6DBEF',
borderLineWidth : 1
}
drawPieChart(pieData, options);
```
#### Circle graphs:
###### Demo:
###### Usage:
```
$(function() {
var max = 1000;
var stat = 750;
var options = {
radius : 90,
innerLineWidth : 24,
outerLineWidth : 22,
innerFillColor : "#FFFFFF",
outerFillColor : "#2ECC71",
textColor : "#FFFFFF",
shadowColor : "#34495E"
}
drawCircleGraph("#circle-graph", stat, max, options);
});
```