Author: | victormiranda |
---|---|
Views Total: | 843 views |
Official Page: | Go to website |
Last Update: | January 8, 2015 |
License: | MIT |
Preview:

Description:
Chartdj is a lightweight, simple to use and modular JavaScript charting library for producing charts using d3.js and Html5 canvas
element.
How to use it:
Load the necessary d3.js in the document.
<script src="https://d3js.org/d3.v3.js"></script>
Load the other JavaScript files in the document.
<script src="js/util.js"></script> <script src="js/core.js"></script> <script src="js/line.js"></script> <script src="js/chart.js"></script>
The sample JavaScript to draw a simple line chart with custom data on an Html5 canvas
element.
var canvas = new chartDJ.Canvas({ size: [800,300] }); var sales = new chartDJ.chart.serie.Line({ label : 'Sales', color : 'darkred', interpolation: 'cardinal', accesor: { x: function(e) {return new Date(e.time);}, y: function(e) {return e.value;} }, data : [ { time: '1999/01/01', value: 0 }, { time: '2000/01/01', value: 50 }, { time: '2000/06/01', value: 100 }, { time: '2001/01/01', value: 140 }, { time: '2002/01/01', value: 10 }, { time: '2003/01/01', value: 40 } ] }); var incomes = new chartDJ.chart.serie.Line({ label : 'Incomes', color : 'darkgreen', interpolation: 'cardinal', accesor: { x: function(e) {return new Date(e.time);}, y: function(e) {return e.value;} }, data : [ { time: '1999/01/01', value: 10 }, { time: '2000/01/01', value: 20 }, { time: '2000/06/01', value: 220 }, { time: '2001/01/01', value: 100 }, { time: '2002/01/01', value: 100 }, { time: '2003/01/01', value: 140 } ] }); var chart = new chartDJ.chart.Chart({ container: canvas, size: [550,250] }); chart.addSerie(sales); chart.addSerie(incomes); setTimeout(function(){ sales.data[0].value = 100; sales.data[4].value = 500; chart.updateSerie(sales) },1000); chart.render();