Basic HTML5 Chart Example - CanvasJS

Basic HTML5 Chart Example

by daniel silva

HTML

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

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
	{
		animationEnabled: true,
		title:{
			//text: "Multi Series Spline Chart - Hide / Unhide via Legend"
		},
		data: [
          {
			type: "line", //change type to bar, line, area, pie, etc
			showInLegend: true,  
          axisYType: 'primary',
			dataPoints: [
				{ x: 10, y: 51 },
				{ x: 20, y: 51},
				{ x: 30, y: 51 },
				{ x: 40, y: 51 },
				{ x: 50, y: 51 },
				{ x: 60, y: 51 },
				{ x: 70, y: 51 },
				{ x: 80 , y: 51},
				{ x: 90, y: 51}
			]
			},
		{
			type: "area", //change type to bar, line, area, pie, etc
			showInLegend: true,  
          axisYType: 'primary',
			dataPoints: [
				{ x: 10, y: 51 },
				{ x: 20, y: 5},
				{ x: 30, y: 50 },
				{ x: 40, y: 62 },
				{ x: 50, y: 95 },
				{ x: 60, y: 66 },
				{ x: 70, y: 5 },
				{ x: 80, y: 32 },
				{ x: 90, y: 16}
			]
			},
			{
			type: "line",
			showInLegend: true, 
              axisYType: 'primary',
                color: 'black',
			dataPoints: [
				{ x: 10, y: 21 },
				{ x: 20, y: 44},
				{ x: 30, y: 35 },
				{ x: 40, y: 45 },
				{ x: 50, y: 25 },
				{ x: 60, y: 58 },
				{ x: 70, y: 18 },
				{ x: 80, y: 30 },
				{ x: 90, y: 11}
			]
			}
		],
		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();