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: 360px;"></div>

JavaScript

'''	var chart = new CanvasJS.Chart("chartContainer",
    {
      title:{
        text: "Temperature et l'humidité"             
      },      
      axisY:{
        titleFontFamily: "arial",
        titleFontSize: 12,
        includeZero: false
      },
      toolTip: {
        shared: true
      },
      data: [
      {        
        type: "spline",  
        name: "Humidité",        
        showInLegend: true,
        dataPoints: [
        {label: "Oct 1" , y: 40} ,     
        {label:"Oct 2", y: 37} ,     
        {label: "Oct 3", y: 34} ,     
        {label: "Oct 4", y: 36} ,     
        {label: "Oct 5", y: 54}              
        ]
      }, 
      {        
        type: "spline",  
        name: "Température",        
        showInLegend: true,
        dataPoints: [
        {label: "Oct 1" , y: 27} ,     
        {label:"Oct 2", y: 28} ,     
        {label: "Oct 3", y: 26} ,     
        {label: "Oct 4", y: 27} ,     
        {label: "Oct 5", y: 32}              
        ]
      }    
      ],
      legend:{
        cursor:"pointer",
        itemclick:function(e){
          if(typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
          	e.dataSeries.visible = false;
          }
          else {
          	e.dataSeries.visible = true;            
          }
          chart.render();
        }
      }
    });

	chart.render();