100th post: Using Google Charts

This is my 100th blog entry! I would like to take this opportunity to thank everyone who has stopped by to read, comment or share something on this blog and make it a success. I started fahd.blog in August 2006 mainly to document my experiences with new technologies and also to share tips and tricks that I have learnt with the rest of the world. I don't plan to stop here, so stay tuned for more interesting posts!

In this post, I'm going to be using the Google Chart API to dynamically create charts illustrating the frequency of my blog posts over the last few years. This API allows you to specify all your data within a URL and have Google create the chart image for you.

Bar Chart
I'm going to draw a bar chart to show the number of posts per month, since 2006.
The chart parameters I will use are:

• cht=bhs (horizontal bar chart)
• chs=400x600 (size)
• chd=t:5,6,2,2,2,2,3,7,... (data)
• chds=0,10 (data scale - min/max)
• chxt=x,y,x (axes)
• chxl=0:|0|1|...|1:|Aug-06|Sep-06|...|2:||Number| (axis labels)
• chco=76A4FB (colour)
• chtt=Blog Posts by Month (title)

This generates the following image:

<img src="http://chart.apis.google.com/chart?cht=bhs&chbh=a&chs=400x600&chd=t:5,6,2,2,2,2,3,7,10,9,3,5,0,1,0,1,0,2,2,1,0,1,0,0,4,5,5,4,7,2,2,7&chds=0,10&chxt=x,y&chxl=0:|0|1|2|3|4|5|6|7|8|9|10|1:|Aug-06|Sep-06|Oct-06|Nov-06|Dec-06|Jan-07|Feb-07|Mar-07|Apr-07|May-07|Jun-07|Jul-07|Aug-07|Sep-07|Oct-07|Nov-07|Dec-07|Jan-08|Feb-08|Mar-08|Apr-08|May-08|Jun-08|Jul-08|Aug-08|Sep-08|Oct-08|Nov-08|Dec-08|Jan-09|Feb-09|Mar-09&chtt=Blog Posts by Month&chco=76A4FB"/>

Line Chart
Here's the same data put into a line chart.
The chart parameters I will use are:

• cht=lc (line chart)
• chs=400x300 (size)
• chd=t:7,2,2,7,4,5,... (data)
• chds=0,10 (data scale - min/max)
• chxt=y,x (axes)
• chxl=0:|0|1|...|1:|Aug-06|... (axis labels)
• chco=80C65A (colour)
• chm=o,FF0000,0,-1,5.0|V,3399CC,0,23,0.5 (circle each point; vertical line at peak)
• chtt=Blog Posts by Month (title)

This generates the following image:

<img src="http://chart.apis.google.com/chart?cht=lc&chbh=a&chs=400x300&chco=80C65A&chds=0,10&chd=t:7,2,2,7,4,5,5,4,0,0,1,0,1,2,2,0,1,0,1,0,5,3,9,10,7,3,2,2,2,2,6,5&chxt=y,x&chxl=0:|0|1|2|3|4|5|6|7|8|9|10|1:|Aug-06|Apr-07|Nov-07|Jul-08|Mar-09&chm=o,FF0000,0,-1,5.0|V,3399CC,0,23,0.5&chtt=Blog Posts by Month"/>

Pie Chart
I'm going to use a Pie Chart to show the number of posts per year.
The chart parameters I will use are:

• cht=p3 (3D pie chart)
• chs=270x120 (size)
• chd=t:22,21,44,13 (data)
• chl=2006|2007|2008|2009 (label)
• chtt=Blog Posts by Year (title)

This generates the following image:

<img src="http://chart.apis.google.com/chart?cht=p3&chs=270x120&chd=t:22,21,44,13&chl=2006|2007|2008|2009&chtt=Blog Posts by Year"/>

As can be seen above, the Chart API is very powerful and allows you to produce different types of charts and customise them with different styles. However, in my opinion, the API is not intuitive and the URLs are quite cryptic. I doubt I will remember how to use the API without having it open in front of me!

References:
Google Chart API