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