Google Chart API Challange
Posted December 9th, 2007 by Clint
I’m not quite sure how long I’ve been ignoring the Google Chart API but I saw it in a post the other day which reminded me, or at least gave me the inkling, that I had seen some discussion of it before.
Well, that was several days ago and I finally had some time to play with it and in a couple of hours created the following bullet chart:
So here’s the challange
- Create a Better Bullet Chart than the Above
- Create a Sparkline
- Create a Square Pie Chart
Using the Google Chart API of course.
Once you’ve created your solution, post a link to it here in the comments. For the solutions that we like best, I’ll ask the author to provide a description and instructions to be published here in a follow up post.
Update: 12/15/2007
Jeff Donnici sends us two sparkline examples.
Simple:
With Banded Background:
Update 12/19/2007
Well with only Jeff taking up the challenge after 10 days, here’s the final solution: a so-called square-pie chart. Of the 3 types this is the most poorly supported by the Google API mostly because on bar charts you cannot control the scale of the axes.
Update Feb 29, 2008
Geoff offers us this austere Bullet Chart solution:
And this slightly "dressed up" version:
December 12th, 2007 at 06:08:10
Genius! The bullet chart looks great.
I wonder if embedded charts work in comments.
December 12th, 2007 at 06:12:43
They do not.
December 12th, 2007 at 08:02:06
Chris,
I suspected that … if you create one, just drop the link in the comments and I’ll put it into the post so we can see your work!
Thanks!
December 15th, 2007 at 17:42:11
Here’s a simple line-style Sparkline:
http://chart.apis.google.com/chart?chs=120×20&chd=s:thequickbrownfoxjumpedoverthelazydogs&cht=lc&chco=999999
… and another, with a banded range:
http://chart.apis.google.com/chart?chs=120×20&chd=s:thequickbrownfoxjumpedoverthelazydogs&cht=lc&chm=r,DDDDDD,0,0.2,0.8&chco=999999
… I think both bar and line styles of Sparklines can be pretty easily created with the API. Keep the dimensions small and don’t include any sort of axis or data labels.
The up-down style of Sparklines (e.g., the ones that Tufte used to show MLB win/loss and home/away over time) might be more difficult.
But now I’m curious HOW MUCH more difficult. Hmm.
December 15th, 2007 at 17:51:56
Hey Jeff,
thanks for the entries. Simple bars and lines, agreed - pretty easy. The win loss, I haven’t looked so see if google supports that kind of chart - let us know what you find out.
-Clint
February 29th, 2008 at 19:36:00
I came up with another solution for bullet charts. I’m not sure if it’s better than Jeff Donnici’s solution, but it’s workable:
http://chart.apis.google.com/chart?cht=bhs&chs=200×25&chd=t:50,0,50|30,0,30|5,0,5|1,0,1|14,0,14|0,90,0|0,10,0&chco=666666,999999,cccccc,000000,cccccc,000000,cccccc&chbh=8,0,0
February 29th, 2008 at 19:42:35
Oops — I didn’t realize Jeff Donnici’s solution was for sparklines only. I guess mine is the only other bullet graph solution. It looks like my link stops at the first pipe, so you’ll have to copy/paste the full URL manually.
February 29th, 2008 at 20:05:28
Okay, last post for today, promise. The URL above isn’t working, so here’s a tinyurl version that’s been dressed up a bit:
http://tinyurl.com/2qsfma
February 29th, 2008 at 20:08:31
Hey Geoff, care to write up how you created your bullet chart?
These are great!
February 29th, 2008 at 20:40:39
Here’s what all the query parameters mean:
cht=bhs
>> horizontal bar chart
chs=300×40
>> ‘300′ pixels wide
>> ‘40′ pixels tall
chxt=x,y
>> enable x-axis and y-axis labels
chxl=0:|0|50|100|150|200|250|300|1:||Revenue|
>> ‘0:|0|50|100|150|200|250|300|’ x-axis labels
>> ‘1:||Revenue|’ y-axis labels
chxs=0,000000,9|1,000000,12
>> ‘0,000000,9′ makes the x-axis labels black and 9px tall
>> ‘1,000000,12′ makes the y-axis labels black and 12px tall
chbh=7,0,0
>> ‘7′ specifies that each bar is 7 pixels tall
>> ‘0′ specifies 0 pixels between each bar which gives the illusion of a single bar
>> ‘0′ specifies 0 pixels between each group which ensures that the bottom bar touches the x-axis
chco=7f7f7f,b2b2b2,e6e6e6,000000,e6e6e6,000000,e6e6e6
>> ‘7f7f7f’ is the horizontal dark gray “background” on bars 1 and 3
>> ‘b2b2b2′ is the horizontal medium gray “background” on bars 1 and 3
>> ‘e6e6e6′ is the horizontal first section of light gray “background” on bars 1 and 3
>> ‘000000′ is the vertical 1 pixel black marker on bars 1 and 3
>> ‘e6e6e6′ is the horizontal remaining section of light gray “background” on bars 1 and 3
>> ‘000000′ is the horizontal black bar in the middle
>> ‘e6e6e6′ is the horizontal light gray “background” to the right of the horizontal black bar
chd=t:50,0,50|25,0,25|7.5,0,7.5|1,0,1|16.5,0,16.5|0,90,0|0,10,0
>> ‘t:’ is text encoding which basically mean each number is a percentage, so a bar with length of 50 fills 50% of the graph
>> ‘50,0,50′ is the horizontal dark gray “background” on bars 1 and 3, bar 2 does not have this section
>> ‘25,0,25′ is the medium dark gray “background” on bars 1 and 3, bar 2 does not have this section
>> ‘7.5,0,7.5′ first section of light gray “background” on bars 1 and 3, bar 2 does not have this section
>> ‘1,0,1′ is the vertical 1 pixel black marker on bars 1 and 3, bar 2 does not have this section
>> ‘16.5,0,16.5′ is the horizontal remaining section of light gray “background” on bars 1 and 3, bar 2 does not have this section
>> ‘0,90,0′ is the horizontal black bar in the middle, bars 1 and 3 do not have this section
>> ‘0,10,0′ is the horizontal light gray “background” to the right of the horizontal black bar, bars 1 and 3 do not have this section
Notice how the colors and datasets match up. If the horizontal black bar ended in the dark gray section, the data sets and colors would have to change.