Posted on August 29, 2008 - by Impress Lab

Using CSS for Bar Graphs

You do not need advanced PHP scripting or XML data to create a web graph. All you need is simple CSS and HTML. You can use graphs to display data more illustratively. This tutorial is going to show you how to take boring data in a table and display it in a bar graph. The technique is simple, but the affect is drastic. This is what we will be creating:

Purpose

Graphs are very useful, especially on the web. Considering that the average website visitors spends only a few seconds or a minute on a page, you need to display information that can be viewed quickly. Graphs display information better than a table of data.

Now, that does not mean data tables are useless. In fact, they are also important for people doing research. As a best practice approach, you should make data tables available, but also include an appealing graph. So let’s get started.

The CSS

We will first start with some simple CSS:

    #graphbox {
border: 1px solid #e7e7e7;
padding: 20px 20px;
width: 250px;
margin-right:10px;
float:left;
background: #f8f8f8;
}
#graphbox h2{
color: #666666;
font-family:Arial, sans-serif;
font-size:1.1em;
padding-bottom: 0.3em;
font-weight:bold;
text-align:center;
}
#graphbox p {
color: #888888;
font-family:Arial, sans-serif;
font-size:0.8em;
padding-top: 0.3em;
text-align:left;
}
.graph {
position: relative;
background: #F0EFEF url(images/graphpaper.gif) left;
border: 1px solid #cccccc;
padding: 2px 2px;
}
.graph .orangebar, .greenbar, .bluebar {
text-align: left;
color: #ffffff;
height: 1.8em;
line-height: 1.8em;
font-family:Arial, sans-serif;
display: block;
position: relative;
}
.graph .orangebar {
background: #ff6600;
}
.graph .greenbar {
background: #66CC33;
}
.graph .bluebar {
background: #3399CC;
}
.graph .bar span {
position: absolute; left: 1em;
}

There are a few key points about the styling. First, the width of the entire graph is set by the graphbox div; in this case 250px. This outer box has 20px paddings on all sides, so the actual graph (the colors) are only 210px wide (250px - 20px from left - 20px from right). Adjusting this graphbox width will adjust the width of the colored graphs. Also, the graphbox div in this case uses a light gray background to help the graph standout from the white page. The graphbox div has left floating so that the main page text can wrap around the graph like an image. We used left float because the left side of your main page text is straight as opposed to a jagged edge on the right site (unless you have justified text alignment).

For the graph title, Heading 2 styling is used. The footnote at the bottom of the graph is simply the paragraph styling. This is a great place to put your source.

Our graph here has three colors, orange, green, and blue. Each bar graph has some common styling as shown:

.graph .orangebar, .greenbar, .bluebar {
text-align: left;
color: #ffffff;
height: 1.8em;
line-height: 1.8em;
font-family:Arial, sans-serif;
display: block;
position: relative;
}

The only styling that is unique is the background color for each, which encompasses the next part of the CSS. Finally, the span styling is what actually is used to display the width of each colored bars in percentage terms.

You will also need the graph paper background and upload it so that the path matches the CSS. The graphpaper.gif image:

The HTML

Take a look at the following HTML, which creates the graph directly below.

<div id="graphbox">
<h2>Student Grades</h2>
<div class="graph"><strong class="orangebar" style="width: 55%;">Steve: 55%</strong></div>
<div class="graph"><strong class="greenbar" style="width: 90%;">Linda: 90%</strong></div>
<div class="graph"><strong class="bluebar" style="width: 75%;">Bill: 75%</strong></div>
<div class="graph"><strong class="orangebar" style="width: 32%;">Jill: 32%</strong></div>
<div class="graph"><strong class="greenbar" style="width: 98%;">Jose: 98%</strong></div>
<div class="graph"><strong class="greenbar" style="width: 85%;">George: 85%</strong></div>
Green: Exceptional. Blue: Marginal. Orange: Needs Improvement.</div>

And the outputted graph:

You can easily modify the colors by simply changing the background colors in the CSS and the class names in the HTML. Also notice that the graph floats to the left. Depending on the amount of data to display, you may want to have the graph width equal 100% the width of your main content div. But in this case we wanted a simple graph that can stand next to body text.

While this graph is not dynamic (this would require PHP scripts and database calls, or XML data), it is perfect for static data and is much better than using a table to display data.