Small Line Chart Generator With JavaScript And Canvas – jschart

Preview:

Description:

jschart is a small JavaScript data visualization library for drawing a simple line chart on an HTML5 canvas element.

How to use it:

Put the main JavaScript file chart.js in the webpage.

<script src="chart.js"></script>

Create an HTML5 canvas element on which you want to draw the line chart.

<canvas id="canvas">
  Canvas not supported!
</canvas>

Define the data you want to visualize.

var data = {
    "xName": "Month",
    "yName": "Users",
    "cols": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    "data": [{ "name": "2016", "values": [6, 21, 60, 654, 323, 265, 282, 876, 111, 345, 899, 145] },
             { "name": "2015", "values": [10, 11, 60, 344, 423, 365, 382, 476, 211, 145, 999, 45] }]
};

Draw a default line chart on the canvas element you just created.

var canvas = document.getElementById("canvas");
chartify(canvas, data);

Default settings to customize the line chart.

var settings = {
    "backgroundColor": "", 
    "chartColor": "",
    "chartLinesColor": "",
    "textColor": ""
};