<!DOCTYPE HTML>
<html>

<head>
	<meta charset="UTF-8">
	<script>
		window.onload = function () {

			var chart = new CanvasJS.Chart("chartContainer", {
				animationEnabled: true,
				title: {
					text: "Stock Price of BMW - August"
				},
				axisX: {
					valueFormatString: "DD MMM",
					crosshair: {
						enabled: true,
						snapToDataPoint: true
					}
				},
				axisY: {
					title: "Closing Price (in USD)",
					includeZero: false,
					valueFormatString: "$##0.00",
					crosshair: {
						enabled: true,
						snapToDataPoint: true,
						labelFormatter: function (e) {
							return "$" + CanvasJS.formatNumber(e.value, "##0.00");
						}
					}
				},
				data: [{
					type: "area",
					xValueFormatString: "DD MMM",
					yValueFormatString: "$##0.00",
					dataPoints: [{
							x: new Date(2016, 07, 01),
							y: 76.727997
						},
						{
							x: new Date(2016, 07, 02),
							y: 75.459999
						},
						{
							x: new Date(2016, 07, 03),
							y: 76.011002
						},
						{
							x: new Date(2016, 07, 04),
							y: 75.751999
						},
						{
							x: new Date(2016, 07, 05),
							y: 77.500000
						},
						{
							x: new Date(2016, 07, 08),
							y: 77.436996
						},
						{
							x: new Date(2016, 07, 09),
							y: 79.650002
						},
						{
							x: new Date(2016, 07, 10),
							y: 79.750999
						},
						{
							x: new Date(2016, 07, 11),
							y: 80.169998
						},
						{
							x: new Date(2016, 07, 12),
							y: 79.570000
						},
						{
							x: new Date(2016, 07, 15),
							y: 80.699997
						},
						{
							x: new Date(2016, 07, 16),
							y: 79.686996
						},
						{
							x: new Date(2016, 07, 17),
							y: 78.996002
						},
						{
							x: new Date(2016, 07, 18),
							y: 78.899002
						},
						{
							x: new Date(2016, 07, 19),
							y: 77.127998
						},
						{
							x: new Date(2016, 07, 22),
							y: 76.759003
						},
						{
							x: new Date(2016, 07, 23),
							y: 77.480003
						},
						{
							x: new Date(2016, 07, 24),
							y: 77.623001
						},
						{
							x: new Date(2016, 07, 25),
							y: 76.408997
						},
						{
							x: new Date(2016, 07, 26),
							y: 76.041000
						},
						{
							x: new Date(2016, 07, 29),
							y: 76.778999
						},
						{
							x: new Date(2016, 07, 30),
							y: 78.654999
						},
						{
							x: new Date(2016, 07, 31),
							y: 77.667000
						}
					]
				}]
			});
			chart.render();

		}
	</script>
</head>

<body>
	<div id="chartContainer" style="height: 370px; max-width: 920px; margin: 0px auto;"></div>
	<script src="../../asset/js/canvasjs/canvasjs.min.js"></script>
</body>

</html>