[Editor's note: The bullet graph is an alternative to circular gauges and meters commonly used on dashboards with a graph that provides a richer data display using less space. The bullet graph consists of five primary components: text label, a quantitative scale along a single linear axis, the featured measure usually as dark black line, one or two comparative or target measures of performance (optional), and from two to five ranges shown as background fills along the quantitative scale to declare the featured measure’s qualitative state like bad, satisfactory, and good (optional) All use the same quantitative scale. Flex component with source code from Agile UI. Google charts version from Dealer Diagnostics. Excel version from Excel User.
Republished from Visual Business Intelligence. Monday, February 4th, 2008 at 2:54 pm.
Image above from Stephen Few’s Information Dashboard Design book seen here.
View PDF format Bullet Graph Design Specification from Stephen Few on the bullet graph. He’s got other useful information design writeups in his Library.
When I designed the bullet graph back in 2005, I did it to solve a particular problem related to dashboard displays. The graphical widgets that software vendors were providing to display single measures, such as year-to-date sales revenue, consisted mostly of circular gauges and meters, which suffered from several problems. Most of them conveyed too little information, did so unclearly, and wasted a great deal of space on the screen. The bullet graph was my alternative, which was designed to convey a rich story clearly in little space.
Since their introduction, a number of dashboard vendors now support bullet graphs, either as a predesigned display widget or as a display that can be easily constructed using their design tools. Now that bullet graphs are being used a great deal, they are being put to the test, and best practices are being developed to use them effectively.
One challenge that is faced by any graphical display of a single measure compared to another, such as a target, is the fact that the target usually functions as a point that the measure should reach or exceed, such as a sales target, but sometimes it functions as a point that the measure should stay below, such as an expense target. Here is a series of bullet graphs, which are designed in the typical manner:
Two of the measures—expenses and defects—work the opposite of the others in that the goal is to remain below the target. The background fill colors on these bullet graphs, which vary from dark gray to indicate “poor performance” through to the lightest gray to indicate “good performance,” are arranged from poor on the left to good on the right for revenue, average order size, and new customers, but in reverse for expenses and defects. The reversed sequence serves as a visual cue that expenses and defects should remain below the target. This cue, however, is not strong. It would be useful if something that stood out more signaled this difference.
We might be tempted to replace the varying intensities of a single color—in this case varying intensities of gray—with distinct hues, to make the reversal of the qualitative scale more apparent, such as by using the traditional traffic light colors that are so popular on dashboards.
This does cause expenses and defects to more clearly stand out as different from the other measures, but at what cost? Even if we ignore the fact that most people who are colorblind (10% of males and 1% of females) cannot distinguish green and red, we are still left with an overuse of color that makes the dashboard appear cluttered and visually overwhelming, as well as a dramatically weakened ability to use color to draw viewers’ eyes to particular areas that need attention. Is there a better way to make certain bullet graphs look different without introducing other more troubling problems?
Here’s a suggestion: not only reverse the sequence of the qualitative scale, but also the direction of the quantitative scale. Using expenses as an example, the quantitative scale could run from 0 at the right of the bullet graph with values increasing leftwards. The bar that encodes the expense measure would then also run from the right edge of the bullet graph leftwards. The bar running from right to left serves as a stronger visual cue that the target works differently, as you can see below:
Although it is not conventional for a quantitative scale to run from right to left, except in the case of negative values, this is easy to read and the unconventionality actually causes it to pop out more clearly. In fact, expenses and manufacturing defects are measures that we can easily think of as negative values (for example, expenses reduce profit and defects reduce manufacturing productivity).
I would like to encourage all the vendors out there that support bullet graphs to support this functionality and for those who use them to take advantage of it.
Tags: actionscript, bar chart, bullet chart, bullet graph, business chart, dashboard, excel, Flash, flex, gauge, google charts, information dashboard design, qualitative, quantitative, stephen few, the back of the napkin