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",
  {
    title:{
      text: "Employee Performance"      
    },
    axisY: {
      title: "Sales"
    },
    axisY2: {
      title: "Hours"
    },
    axisX: {
    },
    data: [
      { 
        showInLegend: true,           
        legendText: "Revenue",
        dataPoints: [
        {label: "Jon", y: -250 },
        {label: "Joseph", y: 245},
        {label: "Joey", y: 345},
        {label: "Jen", y: 456 }      
        ]
      },
      {        
        showInLegend: true, 
        legendText: "Hours",
        axisYType: "secondary",
        dataPoints: [
        {label: "Jon", y: 5 },
        {label: "Joseph", y: 3.4},
        {label: "Joey", y: 4.5},
        {label: "Trin", y: 3.2 },
        {label: "Mike", y: 5.4 },
        {label: "Chuck", y: 4 },
        {label: "Dan", y: 3},
        {label: "Nate", y: 4.6 },
        {label: "Blair", y: 3.8 },
        {label: "Jen", y: 5 }
        ]
      }

      ]
  });

  chart.render();