Basic HTML5 Chart Example - CanvasJS

Basic HTML5 Chart Example

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->

<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
 {
       title: {
            text: "MultiSeries Chart"  
       },
       axisX: {
           interval: 1,
           intervalType: "day",
           valueFormatString: "DD-MMM-YYYY"
       },
      data: [
          {
              type: "column",
              dataPoints : []
          },
           {
              type: "column",
              dataPoints : []
          }
      ]
});

var data = [
    {
        time: new Date(2012, 1, 1),
        total_failures: 12,
        total_accounts: 2
    },
    {
        time: new Date(2012, 1, 2),
        total_failures: 10,
        total_accounts: 5
    },
    {
        time: new Date(2012, 1, 3),
        total_failures: 14,
        total_accounts: 3
    }
]

var dataPoints1 = [];
var dataPoints2 = [];

for( var i = 0; i < data.length; i++ ){
    dataPoints1.push({x: data[i].time, y: data[i].total_failures});
    dataPoints2.push({x: data[i].time, y: data[i].total_accounts});
}

chart.options.data[0].dataPoints = dataPoints1;
chart.options.data[1].dataPoints = dataPoints2;
chart.render();