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/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>

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

JavaScript

window.onload = function () {

var options = {
	animationEnabled: true,  
	title:{
		text: "Monthly Sales - 2017"
	},
	axisX: {
		valueFormatString: "MMM"
	},
	axisY: {
		title: "Sales (in USD)",
		prefix: "$",
		includeZero: false
	},
	data: [{
		yValueFormatString: "$#,###",
		xValueFormatString: "MMMM",
		type: "spline",
		dataPoints: [
			{ x: new Date(2017, 0), y: 25060 },
			{ x: new Date(2017, 1), y: 27980 },
			{ x: new Date(2017, 2), y: 23800 },
			{ x: new Date(2017, 3), y: 49400 },
			{ x: new Date(2017, 4), y: 50260 },
			{ x: new Date(2017, 5), y: 28900 },
			{ x: new Date(2017, 6), y: 38000 },
			{ x: new Date(2017, 7), y: 31500 },
			{ x: new Date(2017, 8), y: 32300 },
			{ x: new Date(2017, 9), y: 42000 },
			{ x: new Date(2017, 10), y: 52160 },
			{ x: new Date(2017, 11), y: 49400 }
		]
	}]
};
$("#chartContainer").CanvasJSChart(options);

}