Pictures tell more than just numbers. Reading and understanding statistical data is not always easy, especially when looking at plain numbers. One cannot easily figure out the semantics of the data if only judging on cold numbers. You can turn your statistical data into easy-reading bar charts with cascading style sheets (CSS). In most cases there’s no need to change the actual data at all. Adding a few styling properties will do the trick. Consider the following list:

• 20%
• 75%
• 40%
• 10%
• 5%

This list does not make lot of sense when casting a quick glimpse on it. Interpreting the figures becomes much more informative when displayed as a bar chart like this one:

Horizontal bar chart

In this article I will show how to turn plain numbers to great-looking easy bar charts. I start with an unordered list of statistical data as follows:

Attaching some attributes to the elements I can now style the list with CSS properties. First, I decide whether to orientate the chart horizontal or vertical. The horizontal chart is the easiest for both the designer and the browser to render. To distinguish horizontal bar from another orientation I give the list "horizontal" classification. I can later designate charting styles to the list using class name "graph". Now the ul list tag has the following class attribute:

With the following styling properties I turn the plain list as a graph:

A little 1 pixel wide and 1 pixel high red dot picture as the background image will show the average line behind the bars. This line is adjusted in its right position using background-position styling property. Depending on the current average value it’s better to place it as an inline styling attribute directly into the list element as follows:

In this example the background image is positioned 30 % from the left. You will need to calculate the average value and convert it to percentage representation. In case you use some dynamic page creating processor, such as PHP, it’s quite easy to construct the line with calculated position. The width of a bar in the chart varies depending on the data value. I have converted the value into its corresponding percentage representation. Using percentage values also lets the chart scale when the user changes the font size in the browser. Again, these proportional values should be easy to calculate when using dynamic page creation. The following sample line shows how to set the width of the bar:

The following styling properties will display the bar as shown in chart 1 earlier:

In this sample the style properties set the background and text color of the bar. I also use very small font size to not inadvertently change the bar size. The text inside the bar may change the bar proportions resulting to incomparable bars. To adjust the height of the bar and text placement I use the following additional styles:

These properties set the line height in order to vertically align the text in the middle of the bar.

Vertical bar chart

Setting up a vertical bar chart requires a bit more effort depending on the browser. Vertical bars are as simple as horizontal ones, except in certain browsers, like Internet Explorer. Firefox renders vertical bar chart with proportional percentage values, but older Internet Explorer versions need to know the exact height of the chart. I have two variations of vertical charts. Chart 2 shows the usual chart while chart 3 shows an alternative chart with hanging bars. In fact, the hanging version needs less styling than the ordinary vertical chart. Browsers like to render the page content from left to right and top down and this is why hanging bars are easier to accomplish.

I start creating the vertical bar chart from the version with hanging bars. It’s almost like the horizontal chart with the exception of setting bar height instead of width (see chart 3).

Also the average line is now positioned vertically and requires a minor modification to the list initialization as follows:

Now the background position is set 30 % from the top and this requires setting the distance to 0 % from the left. I have also introduced a new class name "vertical" to style vertical charts differently when needed. Instead of setting the bar width I now set the bar height as follows:

The styling properties for the vertical chart are set accordingly:

Vertical baselined bar chart

This type of chart shows the bars positioned in the baseline (see chart 2). The bars are again adjusted according to the actual percentage value. I have set the top margin to line up the bars so that they rise from the bottom of the chart canvas. Usually the top margin can be set proportionally and, for example Firefox, renders the chart correctly. Now that everything rises from the bottom, I must also reverse the average line starting from the baseline. This sample code sets the average line now 70 % from the top, it’s same as 30 % from the baseline:

In order to place the bars on the baseline, I have added corresponding top margin. The height of the margin is calculated by subtracting the bar height from 100 %. This will result in the following code:

Displaying the vertical baselined chart with Internet Explorer may require some extra styling. I have explicitly set the chart height in pixels. This is required in order to set the top margin in pixels as well. When using exact measurement you may lose the ability to scale the chart.