Dealer Diagnostics
DIAGNOSTICISM: How to know your dealership in he blink of an eye

Create Bullet Graphs with Google Charts in 7 Easy Steps

UPDATE: We have taken this a step further with a gadget which will allow you to build these using data from a spreadsheet. Check it out!

Stephen Few’s bullet graph, was a welcome addition to the data visualization scene in 2005. Up until that point, displaying a single measure graphically usually involved the dial, gauge or traffic light metaphor. Since then, more visualization tools and business intelligence vendors have started to support bullet graphs. We’ll take take a look at how to create your own bullet graphs using the Google Charts API, using nothing but your browser, in 7 easy steps.

(For those of you who don’t care how they’re made and want instant gratification, you can build your own bullet graph in the form below)

Step 1: Meet the Google Chart API

The Google Chart API allows anyone to create a chart image by calling a specifically formated URL. For the purposes of this demo, all you need to know is that when you give the Google Chart API a URL, it gives you back a png image.

http://chart.apis.google.com/chart?chs=100x40&cht=bhs&chco=000000&chd=t:65&chbh=15&chm=r,ff0000,0,0.49,0.51,1|r,666666,0,0,0.5|r,CCCCCC,0,0.5,1&chxt=x&chxl=0:|0|50|100&chxs=0,000000,9

returns this image:

bullet graph

Step 2: Deciphering the URL

That’s a long and confusing URL. Let’s break it down to see the pieces.

The URL has parameters. These specify size, color, labels, etc. Here’s the important part: each parameter is separated by an ampersand character (&). The URL looks a little more manageable when we isolate the parameters. (Here’s a picture of how the URL breaks down.)

chs=100x40
cht=bhs
chco=000000
chd=t:65
chbh=15
chm=r,ff0000,0,0.49,0.51,1|r,666666,0,0,0.5|r,CCCCCC,0,0.5,1
chxt=x
chxl=0:|0|50|100
chxs=0,000000,9

Don’t worry about what each means at this point (at the end of the page, I have described each of them). For now, simply recognize that a long URL can be easily broken down into a bunch of parameters.

Step 3: Build a Simple Bar Chart

Let’s start with the base of our URL: http://chart.apis.google.com/chart? and add on our parameters

http://chart.apis.google.com/chart?chs=100x40&cht=bhs&chco=000000&chd=t:65&chbh=15

Now we have a simple horizontal bar chart that will be the performance measure in our bullet graph.

simple bullet graph

Step 4: Set the Symbol Marker

The thin vertical bar displays the comparative measure. Start with the base URL from step three and add the comparative measure.

http://chart.apis.google.com/chart?chs=100x40&cht=bhs&chco=000000&chd=t:65&chbh=15&chm=r,ff0000,0,0.49,0.51,1

bullet graph with symbol marker

Chart markers operate by separating a chart into a range from 0, on the left, to 1, on the right. I wanted a thin red line, but not too thin, so I made it stretch from 0.49 to 0.51.

Finally, did you notice the “1” on the end? That “1” tells Google that I want the red marker to show up on top of everything else I have in the graph; that is, I want the red marker to be placed on top of the black bar, not below it where I won’t see it.

Step 5: Set the Bands

The colored bands are the qualitative ranges to show if your measure is good, bad, above target, below target or whatever you prefer.

http://chart.apis.google.com/chart?chs=100x40&cht=bhs&chco=000000&chd=t:65&chbh=15&chm=r,ff0000,0,0.49,0.51,1|r,666666,0,0,0.5|r,CCCCCC,0,0.5,1

Note the pipe symbol “|” that separates the two bands.

bullet graph with bands

Step 6: Set the Scale

Google Charts makes scales easy by treating them like labels, allowing you to set them however you please. I’m going to keep it simple and use an easy scale.

http://chart.apis.google.com/chart?chs=100x40&cht=bhs&chco=000000&chd=t:65&chbh=15&chm=r,ff0000,0,0.49,0.51,1|r,666666,0,0,0.5|r,CCCCCC,0,0.5,1&chxt=x&chxl=0:|0|50|100&chxs=0,000000,9

The chxt parameter specifies that you want to label the x axis. The chxl parameter supplies the values for each label, and chxs specifies the first label (0), the text color (in hex: 000000), and size in points.

bullet graph with scale

Step 7: View

A bullet graph is born. Thanks to the Google Charts API, you can embed the png image through the URL into your web site, document or application (check out the terms of service). Don’t forget to add a text label to your bullet graph so that people know what you’re presenting.

Conclusion

In closing, you should have a pretty clear idea for how a bullet graph can be created using the Google Charts API. For this demo, we wrote the URL by hand, but library support is widely available, although no libraries support bullet graphs out of the box.

Try it Yourself

We whipped up a quick javascript form to generate bullet graphs (hat tip to Bas Wenneker whose library we modified). If people find it useful enough, we could clean the code up a bit so it fully supports bullet graph creation. Let us know.






Your bullet graph:

Parameter Description (and usage in demo)
chs chart size, width x height in pixels
cht chart type, bhs = bar horizontal stacked
chco chart color, 000000 is html hex code for black
chd chart data
chbh chart horizontal bar height, value in pixels
chm chart marker
marker r (for horizontal range)
color html hex code
any value this is a dummy value that is always ignored
start point where the marker starts, 0 is the left, 0.5 is the middle
end point where the marker ends, 1 is the right
chxt chart axis type, to set labels on the x axis
chxl chart axis label, 0 is the data index (there is only one set of data we’re graphing) and 0,50,100 are the labels.
chxs chart axis style, 0 is the axis index we’re referring to, html hex for color and “9” is the font size

Additional Examples

bullet graph example 1
bullet graph example 2

Hopefully this demo gave you enough to get started and get the wheels turning in your head. There’s a lot more that can be done with this type of information graphic; we’re looking forward to seeing what people come up with: drop us a line (or URL) and show us your chops.

  1. 18 Responses to “Create Bullet Graphs with Google Charts in 7 Easy Steps”

  2. I love your blog and the concepts you cover. There’s clarity in simplicity. Are you Stephen Few in disguise? Thanks for doing this.

    By Julius C on Jun 26, 2008

  3. Julius – Thanks for the note and the kind words. We’re not associated with Few though our work, and philosophy, has been heavily influenced by him.

    By DDR Admin on Jun 28, 2008

  4. thanks . but ,how can I use the url in my excel /ppt/word file ?
    especially, my data change monthly

    By ExcelPro's charts blog on Aug 10, 2008

  5. How you think when the economic crisis will end? I wish to make statistics of independent opinions!

    By ooopinionsss on Dec 2, 2008

  6. This is great!

    thanks very much.

    I want to do a dashboard mock-up and I think I should jsut do the whole thing with your javascript!

    This is espceially because I use Tiddly wiki a lot which can include javascript so I could make the whole dashboard there & publish it.

    TW is at http://www.tiddlywiki.com , by the way.

    Dave

    By DaveG on Jun 2, 2009

  7. Oh I should add that I can use the URL generated by putting in a TW tiddler inside an iframe using your URL as the src= parameter & it looks great.

    Thanks again – and please do release a javascript version – preferably as a TW plugin.

    dave

    By DaveG on Jun 2, 2009

  8. Hi! I was surfing and found your blog post… nice! I love your blog. :) Cheers! Sandra. R.

    By sandrar on Sep 10, 2009

  1. 11 Trackback(s)

  2. May 13, 2008: Create Bullet Graphs with Google Charts in 7 Easy Steps | White Sands Digital
  3. Jun 5, 2008: Create Bullet Graphs with Google Charts in 7 Easy Steps « HSI Developer Blog
  4. Jun 5, 2008: 50 Cool Things You Can Do with Google Charts API | College@Home
  5. Jun 5, 2008: Smooth » randomosity » Blog Archive Smooth »
  6. Jun 19, 2008: Dashboard Blogs - Examples & Tutorials » Blog Archive » Google Bullet Graphs
  7. Jul 9, 2008: Gilligan on Data by Tim Wilson » Test Your Data Visualization IQ
  8. Jul 11, 2008: Bullet Graphs in Google « Business Objects Blog
  9. Jul 23, 2008: In-Cell Bullet Charts » PTS Blog
  10. Aug 22, 2008: Visual Business Intelligence - Google Bullet Graphs
  11. Sep 8, 2008: DEALER DIAGNOSTICS » Blog Archive » The DDR Bullet Graph Gadget
  12. Jan 28, 2009: Kelso’s Corner » Blog Archive » Bullet Graphs for Not-to-Exceed Targets (Visual Business Intelligence)

Post a Comment

©2008 Dealer Diagnostics Inc. All rights reserved | Entries (rss) | Comments (rss)