Simple Dynamic Bar Graphs ("Sparklines")

How-To

Examples

Create a number of small 16x16 gifs in different colors, such as these:

For a simple, static bar chart with two values, place two of these colored tiles in the same line of text. Use the image width attribute to represent the value. In the example at right, I use a stacked bar graph with percentage values equaling 100.

<img src="images/green.gif" width="65" height="16" alt="" />

Note: Choose colors with enough contrast to make visual scanning easy. Alternate lighter colors with darker colors.

Pass/fail percentage:

Use the title text attribute to indicate the name of the value any any other details. For enhanced accessibility, it's also wise to put this information in the alt attribute.

<img src="images/green.gif" width="65" height="16" title="Passed: 65% [of 3506] alt="Passed: 65% [of 3506]"/>

Hover the mouse over each part of the graph to see this value.

Pass/fail percentage:

Make it dynamic. Whether with ASP or PHP, it's easy to generate these bar graphs from a database. Simply insert a variable into the image width attribute and the title attribute, and the charts will generate dynamically. Example:

<img
src="images/green.gif"
width="<?php echo $row_grades['%A']; ?>"
height="16"
title="A: <?php echo $row_grades['%A']; ?> % "
/>

If you are using the bar graph to represent percentages, 100 pixels total might not be wide enough. One solution is to double the percentage value with a simple multiplication formula in a SQL statement.

Pass/fail percentage:

To create a more complex bar graph with more values, use the same procedure, but add more tiles. Add a key near the graph to tell viewers what each color segment stands for.

Note: For some types of content, a simple "color-coding" system may be relevant, such as with grades. However, be wary of assigning too much meaning to the colors themselves, due to the prevalence of color blindness and the inconsistent rendering of colors on different monitors.

Average score distribution:

A B C D F

These bar graphs are particularly effective when stacked on top of each other. This "sparklines" arrangement enables quick visual comparison among items (in the example, a comparison by year).

Just as with printed charts generated in Excel, it's good practice to include a data table above or below the stacked bar graph so the numeric values are easily scannable as well (you wouldn't want the mouseovers to be the user's only source of numeric data).

2001:
2002:
2003:
2004:
2005:
2006:

A B C D F

Experiment. The same technique can be used to make vertical graphs within table cells (valign="bottom").

A more sophisticated approach is to use css, anchor tags and spans for the tooltip function (see CSS Tooltips for a complete explanation). The example at right illustrates how this works.

Of course, you can use a PHP or ASP variable to create the tooltip text within the span.

Pass/fail percentage:

Passed: 65% [of 3506]Failed: 35% [of 3506]