In my previous post about creating simple graphs using Google Charts API, I mentioned about a PHP class, called Google Graph, which Ryon Sherman wrote that encapsulates this API, making it easier to code in PHP.

I incorporated this class in my CakePHP project, and found that there were a couple of problems with it.

Using Google Graph
Using this class is actually quite straightforward.

Example Line Chart

The code below draws the above line graph.

// create the GoogleGraph object as $graph
$graph = new GoogleGraph();

// set the Graph type to 'line'

// set the Size of the chart, in this case its 300x150
$graph->Graph->setSize(300, 150);

// define which axis we want, which is x,y only.
// I don't need the top (t) or right (r) axis.

// set the AxisLabels for the x axis		
$graph->Graph->addAxisLabel(array('A', 'B', 'C', 'D', 'E', 'F'));

// set the Axis Range for the y axis 
$graph->Graph->setAxisRange(array(1, 0, 40));

// define the data points as an array
$graph->Data->addData(array(5, 10, 20, 15, 30, 40));

// finally draw the graph.	

Axis Range is wrong
If you noticed from the graph above, the y-axis shows 0, 40 as label points, but ’40’ was not the max axis range. The y-axis continues upwards from ’40’. I wanted ’40’ to be the top marker of the axis.

After troubleshooting for quite some time, I realized that there’s a typo in the class. The author defined axis range as ‘chxp’ instead of ‘chxr’. ‘chxp’ is used to define the label positions, not the axis range.

To fix this, go to the Google Graph class and look around line 738 where it says:

if(!empty($this->Graph->axis_ranges)) {				
	$url .= 'chxp='.implode(',', $this->Graph->axis_ranges).'&';				

Change ‘chxp’ to ‘chxr’ which is the correct parameter to define the axis ranges. Once you’ve done that you’re graph should now look like this.

Example Line Chart fixed

Now I get the y-axis showing up properly, with spaced out markers from 0 up to 40.

Opps, no data scaling
Something still doesn’t look right. The last data point ‘F’ should be 40, but on the graph, it shows the data point at around ’20’ mark.

I found out that the class didn’t provide data scaling capability, which is the ‘chds’ parameter mentioned at the Google Chart API docs.

So here’s fix. Somewhere around Line 115, define yourself an empty $data_scale array.

var $data_scale = array();

Next, create a public function, called setDataScale(), that we can use to set the data_scale value. I put this around Line 434, with the whole other lot of ‘setXXXX’ functions.

public function setDataScale($scale = array()) {
	Description: Specify the data scaling
	Usage: $graph->Graph->setDataScale(array('data set 1 min', 'data set 1 max', 'data set n min', 'data set n max' etc);
		'scale'	= The first value is the min for the first 1st data, etc.
		$this->data_scale = $scale;	

Now that we have a method to take in the data scale values, we need to add it into the graph querystring. I added the following code into the bottom of printGraph() function, around Line 784.

if(!empty($this->Graph->data_scale)) {				
	$url .= 'chds=';
	$url .= implode(',', $this->Graph->data_scale);
	$url .= '&';

Finally, the last thing to do is to called the setDataScale() method in our example code like this…


And you should get a graph like this with the correct scaling.

Example Line Chart fixed again!

Have fun with the class.