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,
  zoomEnabled: true,
	title:{
		text: "Daily Sleep Statistics of Age Group 12 - 20"
	},
	axisX: {
		valueFormatString: "DDD"
	},
	axisY: {
		title: "Sleep Time (in Hours)"
	},
	data: [{
		type: "boxAndWhisker",
		xValueFormatString: "DDDD",
		yValueFormatString: "#0.0 Hours",
		dataPoints: [
			{ x: new Date(2017, 6, 3),  y: [4, 6, 8, 9, 7] },
			{ x: new Date(2017, 6, 4),  y: [5, 6, 7, 8, 6.5] },
			{ x: new Date(2017, 6, 5),  y: [4, 5, 7, 8, 6.5] },
			{ x: new Date(2017, 6, 6),  y: [3, 5, 6, 9, 5.5] },
			{ x: new Date(2017, 6, 7),  y: [6, 8, 10, 11, 8.5] },
			{ x: new Date(2017, 6, 8),  y: [5, 7, 9, 12, 7.5] },
			{ x: new Date(2017, 6, 9),  y: [4, 6, 8, 9, 7] },
      { x: new Date(2017, 6, 10),  y: [14, 16, 18, 19, 17] },
			{ x: new Date(2017, 6, 11),  y: [15, 16, 17, 18, 16.5] },
			{ x: new Date(2017, 6, 12),  y: [14, 15, 17, 18, 16.5] },
			{ x: new Date(2017, 6, 13),  y: [13, 15, 16, 19, 15.5] },
			{ x: new Date(2017, 6, 14),  y: [16, 18, 110, 111, 18.5] },
			{ x: new Date(2017, 6, 15),  y: [15, 17, 19, 112, 17.5] },
			{ x: new Date(2017, 6, 16),  y: [14, 16, 18, 19, 17] }
		]
	}]
});
chart.render();

}