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:

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.

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

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.

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.

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.

Performance measure value
Comparative measure value
Maximum Value
Range split

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

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.

Posted by trevor on 2008-05-13 | 18 Comments »