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.
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.)
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
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.
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.
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.
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.
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
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|
|chbh||chart horizontal bar height, value in pixels|
|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|
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.