chartengine v2.0.1
ChartEngine
Installation
npm install chartengine --save
Usage
import { ChartEngine } from 'chartengine';
Available Charts
Chart | Example |
---|---|
Line | lineChart |
Bars | barChart |
Column | columnChart |
Pie | pieChart |
Mandatory Fields
Field | Type | Example |
---|---|---|
Endpoint | String | 'http://someapiurl/endpoint' |
Params | Object | {elApp: 'myAppGraph'} |
Params Object
Field | Type | Required | Example |
---|---|---|---|
method | String | YES | 'get' |
elApp | String | YES | 'myAppGraph' |
filters | object | NO | {} |
Filters Object
Field | Type | Example |
---|---|---|
dateFilters | Object | {} |
fields | Object | {} |
httpHeaders | Object | {} |
Examples
Simple Line Chart
HTML
<div id="myAppGraph"></div>
Javascript
import { ChartEngine } from 'chartengine';
var chartEngine = new ChartEngine();
chartEngine.lineChart('http://api.url/endpoint', {
elApp: 'myAppGraph'
});
Backend Response
{
"series": [
{
"name": "Installation",
"data": [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
},
{
"name": "Manufacturing",
"data": [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
},
{
"name": "Sales & Distribution",
"data": [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
},
{
"name": "Project Development",
"data": [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
},
{
"name": "Other",
"data": [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}
]
}
Filters
Dates
import { ChartEngine } from 'chartengine';
var chartEngine = new ChartEngine();
chartEngine.lineChart('http://api.url/endpoint', {
elApp: 'myAppGraph',
filters: {
dateFilters: {
someDateVar: new Date(), //date object (or string: '2017-06-20')
someDateVar2: new Date() //date object (or string: '2017-06-20')
}
}
});
Fields
import { ChartEngine } from 'chartengine';
var chartEngine = new ChartEngine();
chartEngine.lineChart('http://api.url/endpoint', {
elApp: 'myAppGraph',
filters: {
dateFilters: {
dateFilters: {
someDateVar: new Date(), //date object (or string: '2017-06-20')
someDateVar2: new Date() //date object (or string: '2017-06-20')
}
},
fields: {
myDummyField: {
multiple: false, //activate multiselection (is true by default) [NOT MANDATORY]
defaultValue: 2, //default value of filter (if is multiple is an array of values) [NOT MANDATORY]
data:[
{key: 1, value: 'Dummy 1'},
{key: 2, value: 'Dummy 2'},
{key: 3, value: 'Dummy 3'},
{key: 4, value: 'Dummy 4'},
]
}
}
}
});
Documentation
TBA
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago