Creating Bullet Bars with Google Charts

By Dan McCreary
November 9, 2008

It seems like every day we are exposed to more information about the world around us. As information technology becomes more complex, busy business people need to be able to quickly identify patterns and exceptions in their daily work. One of the best tools to allow users to quickly view the status of daily operations is the web-based dashboard. Just like a dashboard in your car, the web dashboard can be used to quickly highlight operational parameters that are out of an acceptable range. But your car's dashboard frequently has limited drill down ability and gives us only a red dummy light that indicates we should "Check Engine".

In the past we have seen many dashboards that create "gauges" very similar to the speedometer gauge in our cars. Here is an example of the Google gauge using the Google charts REST API:

http://chart.apis.google.com/chart?
 cht=gom&
 chs=250x100&
 chd=t:70&
 chl=Page%20Views

In the example above I put separate parameters on a new line.

which renders the following:

Google Chart

where:
the chart type (cht=gom) is Google-o-meter
the chart size (chs) is 250 pixels wide and 100 pixels high
the chart data (chd) is 70 in a range of 100
and the chart label (chl) is "Page Views"

This is an example of a RESTful interface. Each of the parameters to the service is encoded directly in the URL. You don't need any tool but a web browser to use the interface.

But as dashboard guru Steven Few has frequently pointed out, needle gauge indicators are not an efficient use of screen real estate. A more efficient way to display a value within an expected range and indicate a target value is to use a simple horizontal bullet bar. Here is an example of a bullet bar using the Google Chart API

http://chart.apis.google.com/chart?
 cht=bhs&
 chs=150x30&
 chd=t:70&
 chm=r,ff0000,0,0.0,0.5|
   r,ffff00,0,0.5,0.75|
   r,00A000,0,0.75,1.0|
   r,000000,0,0.8,0.81&
chco=000000&chbh=10

This renders the following:
Bullet Bar

In the second example the chart type is bar horizontal (bhs) and there are four chart markers (chm) within the bar. The first marker is red, the second is yellow and the third is green.

The first marker is the red bar that extends 50% of the bar's distance r,ff0000,0,0.0,0.5
The second marker is the yellow line that extends from .5 to .75 r,ffff00,0,0.5,0.75
The third marker the green line that extends from .75 to the end of the bar r,00A000,0,0.75,1.0
We can also draw a short vertical black bar to indicate our target value r,000000,0,0.8,0.81
Finally, the overall height of the entire bar is controlled by the chart bar height parameter chbh=10

You can explore more about the Google Charts API here. Make sure to read the license terms and conditions if you are doing more then a few small graphs.

You can also find out how to create these graphs directly from XML data sources at the XQuery Wikibook

What REST interfaces test us is that we no longer need to use a complex programming language and learn how to use a debugger if you have a REST API. You just need a web browser and at the most Notepad to copy and paste examples.


You might also be interested in:

News Topics

Recommended for You

Got a Question?