PHP Error Line Charts & Graphs

Error Graph combined with Line Chart is commonly referred as Error Line Chart. Given example shows Error Line Chart along with PHP source code that you can try running locally.

<?php

$dataPoints1 = array( 
	array("y" => 3.69, "label" => "Jan" ),
	array("y" => 3.06, "label" => "Feb" ),
	array("y" => 4.08, "label" => "Mar" ),
	array("y" => 4.06, "label" => "Apr" ),
	array("y" => 4.48, "label" => "May" ),
	array("y" => 3.45, "label" => "Jun" ),
	array("y" => 4.17, "label" => "Jul" ),
	array("y" => 4.05, "label" => "Aug" ),
	array("y" => 4.05, "label" => "Sep" ),
	array("y" => 3.50, "label" => "Oct" ),
	array("y" => 4.00, "label" => "Nov" ),
	array("y" => 3.86, "label" => "Dec" )
);

$dataPoints2 = array( 
	array("y" => array(3.6, 3.8), "label" => "Jan" ),
	array("y" => array(3.0, 3.4), "label" => "Feb" ),
	array("y" => array(3.8, 4.3), "label" => "Mar" ),
	array("y" => array(3.9, 4.2), "label" => "Apr" ),
	array("y" => array(4.3, 4.6), "label" => "May" ),
	array("y" => array(3.3, 3.6), "label" => "Jun" ),
	array("y" => array(4.0, 4.4), "label" => "Jul" ),
	array("y" => array(3.9, 4.3), "label" => "Aug" ),
	array("y" => array(3.8, 4.2), "label" => "Sep" ),
	array("y" => array(3.4, 3.7), "label" => "Oct" ),
	array("y" => array(3.8, 4.2), "label" => "Nov" ),
	array("y" => array(3.7, 4.0), "label" => "Dec" )
);

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

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	title:{
		text: "Predicted Rainfall"
	},
	axisX: {
		interval: 1
	},
	axisY:{
		title: "Precipitation (in inch)",
		suffix: " in",
		includeZero: false
	},
	toolTip: {
		shared: true
	},
	data: [{
		type: "line",
		name: "Predicted",
		toolTipContent: "<b>{label}</b><br><span style=\"color:#4F81BC\">{name}</span>: {y} in",
		markerType: "none",
		dataPoints: <?php echo json_encode($dataPoints1, JSON_NUMERIC_CHECK); ?>
	},
	{
		type: "error",
		name: "Error Range",
		toolTipContent: "<span style=\"color:#C0504E\">{name}</span>: {y[0]} in - {y[1]} in",
		dataPoints: <?php echo json_encode($dataPoints2, JSON_NUMERIC_CHECK); ?>
	}]
});
chart.render();

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

Related Customization

Color and dash-type of Stem in Error Chart can be customized using stemColor and stemDashType properties. Other commonly used customization options are whiskerThickness, whiskerColor, lineThickness, lineColor, etc.