April 14, 2009

A brief look at the Google Chart API

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 <img> 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

Comments,

  • Trackbacks,
  • and Pingbacks
  1.  avatar Karthik says:

    Have you looked any of these? I think StackOverflow.com uses Flot.

    www.reynoldsftw.com/.../6-jquery-chart-plugins-reviewed

  2. 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.

Comments are closed.

 

Trackbacks and Pingbacks


  1. TrackBack says:
Shortcuts

Where is Dan?


My Blog
My Blog
Twitter
Twitter
Facebook
Facebook
LinkedIn
LinkedIn
Flickr
Flickr
YouTube
YouTube
Delicious
Delicious
Foursquare
Foursquare
Pinterest
Pinterest
GetGlue
GetGlue
Pintley
Pintley
XBOX Live
XBOX Live
Last.fm
Last.fm
Windows Live
Windows Live
Telligent.com
Telligent
Graffiti CMS on CodePlex
Graffiti CMS
Popular

Recent Posts