A look at the Google Graph class

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// create the GoogleGraph object as $graph
$graph = new GoogleGraph();
 
// set the Graph type to 'line'
$graph->Graph->setType('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.
$graph->Graph->setAxis(array('x','y'));	
 
// 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.	
$graph->printGraph();

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:

1
2
3
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.

1
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.

1
2
3
4
5
6
7
8
9
10
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);
	Arguments:
		'scale'	= The first value is the min for the first 1st data, etc.
*/
	if(!empty($scale))
		$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.

1
2
3
4
5
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…

1
2
3
...
$graph->Graph->setDataScale(array(0,40));
...

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

Example Line Chart fixed again!

Have fun with the class.

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • DZone
  • Propeller
  • Reddit
  • StumbleUpon
  • Technorati
  • Yahoo! Buzz
Posted on June 3, 2008 at 4:39 pm by Eldee · Permalink
In: PHP Tutorials · Tagged with: ,

5 Responses

Subscribe to comments via RSS

  1. Written by Ryon on June 11, 2008 at 5:46 am
    Permalink

    The class has been updated to include both of these fixes. Thank you for being so meticulous upon review.

  2. Written by Philip on September 20, 2009 at 2:27 pm
    Permalink

    A small update for those wondering (in response to Ryon): the data scaling part hasn’t been added.

  3. Written by ramin on March 14, 2010 at 7:05 am
    Permalink

    thanks! this helped a LOT

  4. Written by S on March 18, 2010 at 4:44 am
    Permalink

    Is it posible to make an “automatic” data scale?

  5. Written by syabac on July 10, 2010 at 12:29 pm
    Permalink

    thanks for sharing..
    one more alternative PHP charting..
    :)

Subscribe to comments via RSS

Leave a Reply