Basic HTML5 Chart Example - CanvasJS

Basic HTML5 Chart Example

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
      zoomEnabled: true,
	panEnabled: true,
	title:{
      text: "Core Usage for Yesterday, 2014-07-31" 
      },
	legend: {
            cursor: "pointer",
            itemclick: function (e) {
                //console.log("legend click: " + e.dataPointIndex);
                //console.log(e);
                if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                    e.dataSeries.visible = false;
                } else {
                    e.dataSeries.visible = true;
                }
	chart.render();
            }
        },
      data: [//array of dataSeries

{type: "pie",
dataPoints: [
{ y: 6806.72, indexLabel: "S" },    
{ y: 3454.59, indexLabel: "K" },    
{ y: 3278.47, indexLabel: "Al" },    
{ y: 1933.31, indexLabel: "Do" },    
{ y: 1044.06, indexLabel: "Qi" },    
{ y: 994.07, indexLabel: "Ro" },    
{ y: 508.44, indexLabel: "Dye" },    
{ y: 400.09, indexLabel: "Chrs" },    
{ y: 244.32, indexLabel: "Dave" },    
{ y: 169.6, indexLabel: "Nathan" },    
{ y: 85.64, indexLabel: "Yuzhia" },    
{ y: 70.88, indexLabel: "Elizabeth" },    
{ y: 54.05, indexLabel: "Richard" },    
{ y: 48.01, indexLabel: "Lyudmil" },    
{ y: 45.35, indexLabel: "Vincent" },    
{ y: 16.84, indexLabel: "Kenneth" },    
{ y: 13.4, indexLabel: "Stevg" },    
{ y: 7.14, indexLabel: "Isn" },    
{ y: 4.6, indexLabel: "Neal" },    
{ y: 0.01, indexLabel: "Chrir" },    
]}
 ]
     });

    chart.render();