CanvasJS HTML5 JavaScript Charts

CanvasJS helps you create chart in the most simple and efficient way possible

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

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

JavaScript

window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	title:{
		text: "Daily High Temperature at Different Beaches"
	},
	axisX: {
		valueFormatString: "DD MMM,YY"
	},
	axisY: {
		title: "Temperature (in °C)",
		includeZero: false,
		suffix: " °C"
	},
	legend:{
		cursor: "pointer",
		fontSize: 16,
		itemclick: toggleDataSeries
	},
	toolTip:{
		shared: true
	},
	data: [{
		name: "Myrtle Beach",
		type: "spline",
		yValueFormatString: "#0.## °C",
		showInLegend: true,
		dataPoints: [
			{ x: new Date(2017,6,24), y: 31 },
			{ x: new Date(2017,6,25), y: 31 },
			{ x: new Date(2017,6,26), y: 29 },
			{ x: new Date(2017,6,27), y: 29 },
			{ x: new Date(2017,6,28), y: 31 },
			{ x: new Date(2017,6,29), y: 30 },
			{ x: new Date(2017,6,30), y: 29 },
			{ x: new Date(2017,7,1), y: 29 },
			{ x: new Date(2017,7,2), y: 33 },
			{ x: new Date(2017,7,3), y: 33 },
			{ x: new Date(2017,7,4), y: 33 },
			{ x: new Date(2017,7,5), y: 29 },
			{ x: new Date(2017,7,6), y: 29 },
			{ x: new Date(2017,7,7), y: 29 },
			{ x: new Date(2017,7,8), y: 29 },
			{ x: new Date(2017,7,9), y: 29 },
			{ x: new Date(2017,7,10), y: 29 },
			{ x: new Date(2017,7,11), y: 29 },
			{ x: new Date(2017,7,12), y: 29 },
			{ x: new Date(2017,7,13), y: 29 }
		]
	},
	]
});
chart.render();

function toggleDataSeries(e){
	if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
		e.dataSeries.visible = false;
	}
	else{
		e.dataSeries.visible = true;
	}
	chart.render();
}

}