PHP Step Line Charts & Graphs

Download PHP Chart Samples

Step Line Charts are like line chart except that the datapoints are connected using horizontal and vertical lines. Step Line Charts are useful when comparing trends for events that changes value at discrete at non-uniform intervals of time. Given example shows simple PHP Step Line Chart along with source code that you can try running locally.

<?php

$dataPoints = array(
	array("y"=> 26274, "label"=> "2007"),
	array("y"=> 26380, "label"=> "2008"),
	array("y"=> 25058, "label"=> "2009"),
	array("y"=> 24864, "label"=> "2010"),
	array("y"=> 26707, "label"=> "2011"),
	array("y"=> 29309, "label"=> "2012"),
	array("y"=> 34519, "label"=> "2013"),
	array("y"=> 40101, "label"=> "2014"),
	array("y"=> 48401, "label"=> "2015"),
	array("y"=> 58580, "label"=> "2016")
);

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

var chart = new CanvasJS.Chart("chartContainer", {
	title: {
		text: "Employment in US Breweries"
	},
	subtitles: [{
		text: "2007 to 2016"
	}],
	axisY: {
		title: "Number of People Employed"
	},
	data: [{
		type: "stepLine",
		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

The color and the thickness of the line can be customized using lineColor and lineThickness properties respectively. Some other commonly used customization options include markerSize, markerType, etc.