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,

      animationEnabled: true,
	  animationDuration: 3000,
      axisX: {
		minimum: new Date(	2012,	04,	10),
		maximum: new Date(	2012,	04,	15),
		valueFormatString: "day DD",
        interval:1,
        intervalType: "day",
		labelAngle: 50,
      },
      axisY:{
        title: "y",
		includeZero: false,
		maximum: 16.5,
		interval:1,
      },
      data: [
      {        
        type: "line",
		color: "blue",     
        dataPoints: [
        { x: new Date(	2012,	04,	10,	00,	0	),	y:	15.855	},
		{ x: new Date(	2012,	04,	10,	02,	3	),	y:	15.951	},
		{ x: new Date(	2012,	04,	10,	04,	21	),	y:	15.855	},
		{ x: new Date(	2012,	04,	10,	05,	39	),	y:	15.855	},
		{ x: new Date(	2012,	04,	10,	05,	42	),	y:	15.855	},
		{ x: new Date(	2012,	04,	10,	08,	39	),	y:	15.951	},
		{ x: new Date(	2012,	04,	10,	08,	42	),	y:	15.951	},
		{ x: new Date(	2012,	04,	10,	22,	3	),	y:	15.855	},
		{ x: new Date(	2012,	04,	10,	22,	6	),	y:	15.855	},
		{ x: new Date(	2012,	04,	10,	22,	9	),	y:	15.855	},
		{ x: new Date(	2012,	04,	10,	22,	12	),	y:	15.951	},
		{ x: new Date(	2012,	04,	11,	07,	45	),	y:	16.046	},
		{ x: new Date(	2012,	04,	11,	13,	33	),	y:	15.76	},
		{ x: new Date(	2012,	04,	11,	13,	36	),	y:	15.76	},
		{ x: new Date(	2012,	04,	11,	19,	57	),	y:	15.855	},
		{ x: new Date(	2012,	04,	13,	10,	9	),	y:	16.046	},
		{ x: new Date(	2012,	04,	13,	18,	33	),	y:	15.951	}   		
		]
		},
 
      {        
        type: "line",
		color: "red",
        lineThickness: 3,
		indexLabelFontSize: 14,
        dataPoints: [
		{ x: new Date(	2012,	04,	13,	18,	33	),	y:	15.951, indexLabel: "Start", indexLabelPlacement: "outside", markerColor: "black", markerType: "triangle"}, 
		{ x: new Date(	2012,	04,	13,	18,	36	),	y:	15.091	},
		{ x: new Date(	2012,	04,	13,	18,	39	),	y:	13.558	},
		{ x: new Date(	2012,	04,	13,	18,	42	),	y:	12.401	},
		{ x: new Date(	2012,	04,	13,	18,	45	),	y:	12.11, indexLabel: "End",...