I came across the Google-o-meter widget in the Google Charts API today, and had a perfect use for it in my current pet project, convict records.
For the uninitiated, the Google Charts API allows you to request an image with query string parameters and format it in various different ways to produce a pretty graph.
I wanted to display the severity of a convict’s sentence, relative to the known minimum and maximum sentence terms of other convicts I had in my database.
It took a little wrangling before I discovered that I really only needed a few parameters to achieve what I wanted – the final request HTML looked like this:
<img src="http://chart.apis.google.com/chart?chs=240x100&cht=gm&chco=555555,FAFA05|FF0000&chd=t:<?php echo $sentency_severity; ?>" width="240" height="100" alt="Sentence Severity" />
Lets break that down a little.
Range and Indicator Position
The Google-o-meter defaults to a range of 0-100, therefore the easiest way to position your indicator is if you can create a percentage value from 0-100. It does also support custom ranges but that is beyond the scope of this tutorial.
How do we determine the position of the indicator (in PHP)?
// determine the sentence severity $sentency_severity = round(($term / $max_sentence) * 100);
The sentence severity is the sum of the sentence term in question, divided my the maximum known sentence (in my case 47 years, multiplied by 100, and finally rounded for good measure. This gives a percentage result somewhere between 0-100%. 23 years = 50%, 47 years = 100% and so on.
Now that the sentence severity is known, all that is left to do is to pass the parameters to the Google Charts API.
The dimensions of the image length x height. *important* if you change the height value here, make sure you also change the <img> width and height attributes
The chart type – gm = google-o-meter
The indicator hexadecimal colour followed by the start colour and end colour (the gradient in between is almost certainly created by some sort of voodoo magic)
- chd=t:<?php echo $sentency_severity; ?>
The chart data, in this case the indicator position.
The documentation is quite extensive on both the Google-o-meter and the Chart Wizard can also be helpful, although I did find that the wizard was a bit confusing for the google-o-meter in particular, and it ended up adding more parameters than I really needed in the end.