PHP Box And Whisker Chart with Customization

Download PHP Chart Samples

Customizing chart look and feel is much easier. You can customize the color of upper-box and lower-box. Given example shows Box And Whisker Chart with customized upper and lower box colors. It also contains PHP source code that you can try running locally.

<?php

$dataPoints = array(
	array("label" => "Oven", "y" => array(4, 6, 8, 9, 7)),
	array("label" => "Microwawe", "y" => array(5, 6, 7, 8, 6.5)),
	array("label" => "PC & Peripherals", "y" => array(6, 8, 10, 11, 9.5)),
	array("label" => "Air Conditioner", "y" => array(8, 9, 13, 14, 10.5)),
	array("label" => "Dishwasher", "y" => array(5, 7, 9, 12, 7.5)),
	array("label" => "Electric Kettle", "y" => array(4, 6, 8, 9, 7)),
	array("label" => "Fridge", "y" => array(8, 9, 12, 13, 11))
);

?>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	theme: "light2",
	title: {
		text: "Energy Consumption",
		fontColor: "#3C4D2D"
	},
	axisY: {
		title: "Energy Consumption (in kWh)"
	},
	data: [{
		type: "boxAndWhisker",
		color: "#3C4D2D",
		upperBoxColor: "#AEF35A",
		lowerBoxColor: "#B8B2FB",
		yValueFormatString: "#,##0 kWh",
		dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
	}]
});
chart.render();

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

Chart Customizations

Dash type of stem and the whisker can be customized using stemDashType and whiskerDashType properties. Some other commonly used customization options include stemColor, whiskerColor, etc.