Lightweight Plotting & Charting JavaScript Library – Chartdj

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();