A hands-on with the Google chart API

Inspired by my own previous post (how’s that for some blog-inbreeding?): a hands-on with the Google chart API.

Instead of going for a graph displaying how many visitors ended up here google-searching for the tits and ass of Veronique de Cock after my post on “toplessness”, I tried to create a graph comparing the chances of Yves Leterme becoming PM of Belgium, in correlation with the intelligence and sensibility of his statements about the Walloons.

Google API generated image

The red line represents his chances of becoming the next PM.
In 2006 and until the elections, it went uphill all the time (e.g. when he dropped the glasses, held CD&V and N-VA together when Jean-Marie DeDecker briefly joined the N-VA, waited long to go for the federal elections instead of staying Flemish minister-president …). At the elections, it was at its peak: he became the most popular politician, and won the elections with 800,000 preferential votes.
After which he went on a collision course with the French-speaking part of the country, showed a remarkable lack of leadership, and made almost no progress in forming a government. So his chances kept diminishing, resulting in a standstill-government, a formation of 176 days, a crisis of the regime. Everything bùt a government Yves Leterme I.

The green line represents his finest statements about the Walloons.
They varied from questioning their ability to learn Dutch early on (which was intended ironically), to confusing the Belgian anthem with the Marseillaise (which was a cockup), through telling a French newspaper that keeping Belgium together is not a goal (which was unfortunate for somebody trying to become the leader of that same country), through refusing to speak with the RTBF, through comparing the RTBF with Radio Milles Collines (As he did today. This was the radio-station that called for a Hutu-Tutsi genocide in Rwanda!).
Where will he be headed from here (If he takes Godwin’s law any further, next up are: comparing Elio to Goebbels, telling Milquet she’s the bastard daughter of Léon Degrelle and finally calling for an military annexation of Brussels?).

How to build this graph

To make this chart, all it takes is a 384 character long call to the google-server. It retuns the image you see above.
Here is the call, broken down by its parts:


The basic statement. The API you’re calling is basically an image generator, with lots of options for displaying data. It is generated on the fly, and then displayed in your page. This means you could also fill it with dynamic data.


One of the required elements. Unfortunately, if you make it too small to fit the content in, the graph will be clipped. So that could be a tough call if you want to use it with dynamic data!


The title. Unfortunately, there are no options for font. For a linebreak, ad a “|”. Encode spaces with “%20”.


lc = line chart. The other options are Bar chart, Pie chart, Venn diagram and Scatter plot.


the number of axes. The third axis is called “r”, not “z” as we’d name it over here


These are the scales for the three axes. Positive from 0 to 100 for x and y. Negative (from 100 to 0) for the third one.


The color and font size for axis 1 (red) and axis 2 (green). Axis 0 (the horizontal) stays unchanged.


The axis labels for the 0-axis (the horizontal one)


The colors of the lines he’ll draw


More options for the lines: thickness, length of line segment, length of blank segment (to form a continuous or a dashed line)


The actual data.


The background color (efefef grey for the entire graph – a gradient from white to black for the chart area).

The conclusion

The Google API for charts will have it’s use, but after toying around with it, I find it everything but an elegant solution:

  • Steep learning curve
  • No XML-data. If you want that, you’ll have to process it server-side first, or rely on javascript-importing, decoding, encoding and then sending it through the google chart api url
  • Limited set of chart-choices (this might grow)
  • 50.000 requests per page limit. Guess that means you can have a lot of graphs displayed, but they could’ve solved that with a caching mechanism, no?
  • Complicated url-forming. The url for the chart on top is 384 characters, and left a lot of the options untouched and is with a miniscule data-set. Somebody might build a tool where you can pick all kinds of options, import data and build you a url to the api from that. Until that day: it’s complicated and prone to errors
  • And finally: it’s has no features for accessibility. Since it returns only an image, the only way to make it slightly accessible is to put an alt or londesc with it. But you have no way of knowing how the graph will look before you display it (with dynamic data)… Heck, a flash version would even score better.

Some fun with google-charts:
Goatse man
The finger
Percentage of chart which looks like Pac-Man

Geef een reactie

Vul je gegevens in of klik op een icoon om in te loggen.

WordPress.com logo

Je reageert onder je WordPress.com account. Log uit /  Bijwerken )


Je reageert onder je Twitter account. Log uit /  Bijwerken )

Facebook foto

Je reageert onder je Facebook account. Log uit /  Bijwerken )

Verbinden met %s