Google-O-Meter tutorial with examples

Sentence Severity

You are sentenced to Life (doh!)... in Australia (woohoo!)

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&amp;cht=gm&amp;chco=555555,FAFA05|FF0000&amp;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.

Other Parameters

Now that the sentence severity is known, all that is left to do is to pass the parameters to the Google Charts API.

  • chs=240×100
    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
  • cht=gm
    The chart type – gm = google-o-meter
  • chco=555555,FAFA05|FF0000
    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.

4 thoughts on “Google-O-Meter tutorial with examples

  1. Thank you for your explanation, it was much easier to undertstand compared to Google’s wizard.

    I’m implementing it on my website to indicate the bitterness of beer(s) and you’ve saved me a lot of my time with your post.

    Cheers!

  2. Can the Google-O-Meter data be dynamically tied to a Google Sheet so we can code them once and have our team members updating the sheets to keep them current?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>