HTML5 & JS Box and Whisker Chart - 0 | JSFiddle Sample Code

HTML5 & JS Box and Whisker Chart - 0 | JSFiddle Sample Code

by Arun_ad

HTML

<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<div style="margin-top:16px;color:dimgrey;font-size:9px;font-family: Verdana, Arial, Helvetica, sans-serif;text-decoration:none;">Source: <a href="https://canvasjs.com/docs/charts/chart-types/html5-box-and-whisker-chart/" target="_blank" title="HTML5 &amp; JS Box and Whisker Chart ">https://canvasjs.com/docs/charts/chart-types/html5-box-and-whisker-chart/</a></div>

JavaScript

window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	title: {
		text: "Energy Consumption"
	},
	axisY: {
		title: "Energy Consumption (in kWh)"
	},
	data: [
	{
		type: "boxAndWhisker",
		dataPoints: [ //y: [Minimum, Q1, Q3, Maximum, Q2]
		{ label: "Oven", y: [4, 6, 8, 9, 7] },
		{ label: "Microwawe", y: [5, 6, 7, 8, 6.5] },
		{ label: "PC & Peripherals", y: [6, 8, 10, 11, 9.5] },
		{ label: "Air Conditioner", y: [8, 9, 13, 14, 10.5] },
		{ label: "Dishwasher", y: [5, 7, 9, 12, 7.5] },
		{ label: "Shaver", y: [2, 3, 4, 6, 3.5] },
		{ label: "Electric Kettle", y: [4, 6, 8, 9, 7] },
		{ label: "Fridge", y: [8, 9, 12, 13, 11] }
		]
	}
	]
});
chart.render();

}