Simple-charts NPM

simple-charts

Provide ability to draw charts without any dependencies

Supported charts

Line Chart

Installation

npm install simple-charts --save

Usage

Include it into your build process and require it.

var SimpleCharts = require("simple-charts")

Or use the bundled library dircetly in your Browser.

    <script src="./node_modules/simple-charts/bundle.js"></script>

Which will expose a "SimpleCharts"-Variable for you.

var group = new SimpleCharts.LineDataGroup('a');
group.addPosition(1, 1);
group.addPosition(3, 1.5);
group.addPosition(4, 1.7);
group.addPosition(5, 1.9);
group.addPosition(6, 2);

var set = new SimpleCharts.LineDataSet();
set.Height = 200;
set.Width = 600;
set.addLineDataGroup(group);

var chart = new SimpleCharts.LineChart(set);
chart.Update();
chart.appendTo(document.body);

LineChart

Programmatically:
To create a line chart programmatically you will need to utilize three classes.

1) Create an instance of LineDataGroup.ts. This object has a 'addPosition(x,y)'-Method. You need to feed it all your coordinates.

2) Create an instance of LineDataSet.ts. The LineDataSet defines the charts size and which LineDataGroups are displayed. You need to add the previous created LineDataGroup to this Instance via the "addLineDataGroup(group)"-method.

3) Create an instance of LineChart.ts. The constructor takes the previously created LineDataSet as argument. Call the "Update()"-method on the newly created LineChart, followed by the "appendTo(node)"-method. The "appendTo(node)"-method expect an HTML-Node element as input parameter, which will be used to attach the generated chart.

For an example please reffer to LineChartExample.ts.

BarChart

For an example please reffer to BarChartExample.ts.

Structure

Development

First install all development dependencies by running:

npm install

You can run the library in the browser by running:

npm start

This will start a webpack development server.
Navigate to: http://localhost:8080/

The docs/index.html-file is beeing displayed in the development server. It includes the generated bundle.js and uses styles from docs/styles.css. Additionally the docs/ folder makes up the github page. The docs/src/ directory contains the js-code for the page, if the input data for the library need to be tested or changed this is the place.

The library source can be found in src/.

Changes to src/ or docs/src/ trigger a compile of the .ts-files, rebundling the generated .js-files as a single bundle.js-file and finally a reload of the browser to reflect the changes.

Note: The webpack live server will not recreate the bundle.js-file on your disk while developing changes are bundled, the generated bundle.js from the webpack development server will be served from ram. In order to generate an up to date bundle.js-file you need to manually run: