all posts

A brief look at the Google Chart API

Published to Blog on 14 Apr 2009

I needed a simple chart control. I briefly thought about the new ASP.NET Chart control, but that is .NET 3.5 and my current code base is still .NET 2.0. I probably could migrate the code to 3.5 painlessly enough, but “if it ain’t broke…”. I have some experience with amCharts, and they provide an option to use any of their products for freeda, with the only limitation being a small link to their web site being displayed in the top left corner of every chart.

I had read about the Google Chart API in a couple of places so I decided to give it a spin for my simple needs:

The Google Chart API returns a PNG-format image in response to a URL. Several types of image can be generated, including line, bar, and pie charts. For each image type, you can specify attributes such as size, colors, and labels.

The Google Chart API lets you dynamically generate charts. To see the Chart API in action, open up a browser window and copy the following URL into the address bar:

_http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World_

Press the Enter or Return key and - presto! - you should see the following image:

Yellow pie chart

My first thoughts were:

  • “seems simple enough, it’s just an tag with the source set to the Google charts API url with bunch of different querystring params to define the data and formatting”
  • followed by “all those querystring params look complicated”
  • followed by “okay the pie chart is cool, but I need a line chart”.

I hit up the line charts section of the documentation, created a simple chart, then just kept experimenting with different settings, parameters, and labels until I had something that looked decent.

The following url emits the below image:

http://chart.apis.google.com/chart?
cht=lc
&chd=t:0,1.91,1.91,1.92,1.93,1.94
&chds=0,2
&chs=500x250
&chl=Big+Bang|4/14/2009
&chtt=TFF+Ratio+for+Dave+Donaldson
&chxt=y
&chxr=0,0,2
&chm=N*f2*,000000,0,-1,11

After that I was able to grab the url, place it in my code and use some string formatting to replace the data, titles, etc. with dynamically generated data.

The Google Chart API is probably not a solution for your enterprise charting needs, but it will help you put together some simple charts easily for your run-of-the-mill web application. Two of the best things about it that make it easy to work with:

  1. The documentation is good enough, making it fairly easy to figure out how to do whatever it is you’re trying to do
  2. Because it is URL based you can keep experimenting with your charts by simply changing values in the URL – no code , no test harness, just a browser and a little time and patience.

You can check out my use of Google Charts at the following:
http://twitterratio.com/history.aspx/danhounshell
http://twitterratio.com/history.aspx/arcware
http://twitterratio.com/history.aspx/jeffhunsaker
http://twitterratio.com/history.aspx/scottw


Dan Hounshell
Web geek, nerd, amateur maker. Likes: apis, node, motorcycles, sports, chickens, watches, food, Nashville, Savannah, Cincinnati and family.
Dan Hounshell on Twitter


  • On 15 Apr 2009 "Karthik"" said:
    Have you looked any of these? I think StackOverflow.com uses Flot. www.reynoldsftw.com/.../6-jquery-chart-plugins-reviewed
  • On 15 Apr 2009 "Dan Hounshell"" said:
    I have looked at Flot before, when looking at some other options for Harvest. I liked what I saw, but I didn't dig in too deeply. I'll have to check out the rest of them. Thanks for the link, Karthik.
  • On 17 Apr 2009 "TrackBack"" said: