Thibauld - Imagination and Execution -

PHP function to draw nice looking XY plot charts with google chart API

Creating nice charts used to be a hard task. Lately, I dug a little bit into Google chart API to see what they had to offer and how they could help me draw nice looking charts easily.

In theory, using Google chart is dead simple: just build an URL with the right parameters and Google will return you an image with your nice looking chart. However, in practice, it turned out a little bit more tricky. If you only want to draw a pie charts then it is pretty straight forward. But if you want to build an XY plot chart, then it gets harder!

Indeed, you should not use Google chart API like you'd use a spreadsheet. Keep in mind that Google chart API is about drawing an image: the X axis and the Y axis are treated completely independantly of your points coordinates.  If you do not pay enough attention, you'll end up with a chart with a completely wrong scale.

I tried to find some PHP libraries to help me draw my XY chart but found nothing satisfactory, so I finally decided to write my own little PHP function. Let me share it with you:

function getChart($chart) {
$y_max = $chart['y_max'];
$y_min = $chart['y_min'];
$y_step = $chart['y_step'];
$y_grid_step = $chart['y_grid_step'];
$x_max = $chart['x_max'];
$x_min = $chart['x_min'];
$chart_size = $chart['chart_size'];
$title = $chart['title'];
$x = $chart['x_axis'];
$x_nb = count($x);
$x_int = 100/$x_nb;
$first = 0;
if ($chart['x_labels_centered']) $first = $x_int/2;
for($i=0;$i<=$x_nb-1;$i++) { $positions[] = floor($first + ($i * $x_int)); }
foreach($positions as $n => $pos) { $x_values[$pos] = $x[$n]; }
$x_range = implode(',',array_keys($x_values));
$x_labels = implode('|',$x);
$grid_step = $y_grid_step*100/$y_max;
$url = "http://chart.apis.google.com/chart?";
$cht = "cht=lc";
if (!empty($chart['data_y'])) $cht="cht=lxy";
$chd = "chd=t:".implode(',',$chart['data']);
if (!empty($chart['data_y'])) $chd.="|".implode(',',$chart['data_y']);
$chg = "chg=$x_int,$grid_step,1,5";
$chxt = "chxt=x,y";
$tmp = array();
for ($i=0;$i<=$y_max;$i+=$y_step) { $tmp[] = $i; }
$y_labels = implode(',',$tmp);
$chxp = "chxp=0,".$x_range."|1,".$y_labels;
$y_labels = implode('|',$tmp);
$chxl = "chxl=0:|".$x_labels."|1:|".$y_labels;
$chxr = "chxr=1,$y_min,$y_max,$y_step";
$chtt="chtt=".str_replace(' ','+',$title);
$chs = "chs=".$chart_size;
$chds = "chds=$y_min,$y_max";
$chm="chco=0000FFFF&chm=B,76A4FB,0,0,0";#|s,0000FF,0,-1,10";
if (!empty($chart['data_y'])) $chds ="chds=$x_min,$x_max,$y_min,$y_max";
$url .= implode('&', array($cht,$chd,$chg,$chm,$chxt,$chxl,$chxp,$chxr,$chtt,$chs,$chds));
return $url;
}


Dont' get me wrong: this is really a quick and dirty function and not meant to be beautiful code. Here is an invokation example:

$data_x = array(0,4,5,9,10);
$data_y = array(20,5,7,9,10);
$months_x = array('Jan','Fev','Mar','Avr','May');
$chart_xy = array(
'title'=>"Chart Title", // CHART TITLE
'data'=>$data_x, // CHART DATA (X)
'data_y'=>$data_y, // CHART DATA (Y)
'x_axis'=>$months_x, // X AXIS LABELS LIST
'x_labels_centered'=>true, // SHOULD LABELS ON X AXIS BE CENTERED?
'y_min'=>0, // MIN VALUE OF Y AXIS
'y_max'=>25, // MAX VALUE OF Y AXIS
'y_step'=>5, // Y AXIS INTERVAL (NUMBERS ON THE AXIS)
'y_grid_step'=>5, // Y AXIS GRID INTERVAL (HORIZONTAL LINES ON THE GRID)
'x_min'=>0, // MIN VALUE OF X AXIS
'x_max'=>10, // MAX VALUE OF X AXIS
'chart_size'=>'300x300' // CHART DIMENSIONS
);
$url = getChart($chart_xy);

This code would result in the following graph:

And if I change :

$months_x = array('Jan','Fev','Mar','Avr','May');

by

$months_x = array('Jan','Fev','Mar');

I get the following graph:

What is important to note here is that it is up to you to make your X and Y axis consistent with your data, ortherwise, you'll end up with a totally meaningless chart.

Of course, this code is adapted to my needs so please feel free to copy this PHP function and adapt it so that it fits your particular needs!

Hope it will be useful for some of you...