Author: | ftunholm |
---|---|
Views Total: | 2,623 views |
Official Page: | Go to website |
Last Update: | April 3, 2017 |
License: | MIT |
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": "" };