PHP Charts & Graphs with Zoom & Pan

Download PHP Chart Samples

Zooming and Panning allows analysis of data at microscopic level. Zooming allows you to see data in more detail by selecting a particular region, Panning / Scrolling allows you to navigate through the chart after you zoom in. Given example demonstrates a Line Chart with Zoom / Pan feature. It also includes PHP source code that you can try running locally.

<?php

$dataPoints = array();
$y = 40;
for($i = 0; $i < 1000; $i++){
	$y += rand(0, 10) - 5; 
	array_push($dataPoints, array("x" => $i, "y" => $y));
}

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

var chart = new CanvasJS.Chart("chartContainer", {
	theme: "light2", // "light1", "light2", "dark1", "dark2"
	animationEnabled: true,
	zoomEnabled: true,
	title: {
		text: "Try Zooming and Panning"
	},
	data: [{
		type: "area",     
		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

Setting zoomEnabled property enables the zooming and panning feature in charts. zoomType allows you to select the axis along which zooming / panning should occur i.e. axis X, Y or both. Some other customization options include markerSize, lineColor, animationEnabled, etc.