Script | 15 Comments

PHP class/WP plugin for Google Charts API

Honestly I simply have no better place where to dump this. :) I need PHP exercise and tired of wasting time and effort every time I need chart or graph of some kind.

So unless you are interested (together or separately) in:

• PHP;
• Google;
• charts (or at least pretty pics).

Then it is safe to skip this one.

What it does

Google Chart API serves pretty (or ugly, your choice) graphs of various kinds, taking specially formed URLs as input. One of those things that started as internal tool to power Google’s own stuff and later expanded into freely available service.

Why bother

• let Google do grunt work of image generation;
• let Google take bandwidth hit, up to 250K requests daily allowed and you can ask for more;
• hook some dynamic data into it and get image that is always up to date.

Goals

Naturally there are a lot of solutions to make use of Google charts already. Somehow most of PHP ones start with “I am not going to maintain this” or “Could be better” or whatever.

I decided I could as well work with mess of a code that is mine. Roughly I want my WordPress blog to:

• easily produce charts (of any kind I might like) when needed;
• style them in consistent way;
• make whole thing easy to work with.

Demo

Most of my charts are traffic related anyway. So I took real (plus projected) traffic details for two years of blogging. In PHP this would be:

$first=array(1634,1960,3664,3089,2084,2975,5835,7395,8091,10524,13169,
15022);
$second=array(16089,16676,18456,19129,21171,22674,21935,26010,26959,
29836,30924,34225);

If I simply drop these in Charts URL I will get terrible result, there are four different encodings to choose from and none of them is any good with large numbers.

So, taking my class for a ride:

$traffic = new GoogleChart;
$traffic->type='lc';
$traffic->SetImageSize(540,200);
$traffic->SetEncode('simple');
$traffic->AddData($first);
$traffic->AddData($second);

• create new object;
• set type to simple lines;
• image size to one that fits my blog’s content area;
• choose simple encoding that gives shortest URL, notice that large values will be automagically recalculated for it;
• feed two arrays into it.

echo $traffic->GetImg();

Here they are, nicely scaled to occupy all of image. Bit bland thou. Let’s spice it.

$traffic->AddChartColor('FF9900');
$traffic->AddChartColor('0077CC');
$traffic->AddLineStyle(3);
$traffic->AddLineStyle(2,5,5);
$traffic->AddDataLineStyle('0077CC',1,'0:1',3);
$traffic->AddFillArea('B','FF99007F',0);
$traffic->AddFillArea('b','E6F2FA7F',0,1);

• add two colors for lines, order applied will be the same I added arrays in;
• add two line styles, solid for past line and dashed for second year that had only started recently;
• additional line segment to cover time that passed in second year;
• some colors, notice different syntax – first covers from line to bottom of graph and second covers between two lines.

Much better, right? If I am ripping Google Analytics style anyway let’s add those cute nodes.

$traffic->AddShapeMarker('o','FFFFFF',0,-1,9);
$traffic->AddShapeMarker('o','FF9900',0,-1,7);
$traffic->AddShapeMarker('o','FFFFFF',1,'0:1',9);
$traffic->AddShapeMarker('o','0077CC',1,'0:1',7);

• first set of markers will create orange dot on top of larger white for first year;
• second set will do same for second, but only on chosen segment.

Now it looks really nice, but overall lacks info value. Could be graph or anything, let’s make it clear.

$traffic->AddAxis('y,x');
$traffic->AddAxisRange(0,35000,5000);
$traffic->AddAxisLabel(array('Aug','Sep','Oct','Nov','Dec',
'Jan','Feb','Mar','Apr','May','June','July'),1);
$traffic->SetGrid(round(100/11,2),round(100/7,2),1,3);

• add two axes for left and bottom;
• left gets traffic figures from 0 to 35k with 5k step;
• bottom gets months;
• while at it I add grid, split into 12 parts horizontally and 7 vertically to match.

And for last touch, since I am lazy to type explanations for chart near it:

$traffic->SetTitle('Visits per month');
$traffic->AddLegend('2008-2009');
$traffic->AddLegend('2009-2010');
$traffic->SetLegendPosition('b');
$traffic->AddDataPointLabel('f',round(array_sum($first)+$second[0]+
$second[1],-3).' total','000000',1,1,12);

• title;
• names for graphs, notice they pick up colors as well;
• show legend at the bottom;
• small flag with calculated total visits so far.

Nice, isn’t it? :)

Todo

• cleanup initial mess of a code;
• implement maps, QR codes and labels;
• implement method to call sets of hardcoded styles.

Overall

Two things AS IS and NOT PRODUCTION CODE. I spent three days to get most of properties implemented and there is plenty of polishing ahead. Will be happy to hear what you want from such a class. And maybe some simple and stylish examples to hardcode.

Can be used as WP plugin (but does nothing except providing class) or simply included in PHP to play with.

Version history

• 0.1 initial release

Google Chart API http://code.google.com/apis/chart/

Plugin download http://www.rarst.net/script/google_chart.zip