Vertical Bar Graphs with CSS and PHP

This technique was originally inspired by Eric Meyer. I have used this technique more times than I can remember, each time with a unique twist.

Using HTML and CSS you can create light weight, attractive bar graphs. Creating them with dynamic data will save you time in the future.

Example Implementation
Creating the list with PHP
Styling the graph with CSS
Advanced Styles

First, an Example

Change the graph style: Bar | Line | Points | 3D Bar

Creating the List, using PHP

We need to create a simple list, with three parameters on each <li> tag. Nesting is not required.

height: The height of that individual bar in pixels or em.
left: The y-axis or horizontal offset for that bar group.
class(optional): So we can style individual data sets.

1.0 Desired HTML


<ul class="barGraph">               
    <li class="set1" style="height: 57px; left: 0px;">57</li>
    <li class="set2" style="height: 27px; left: 0px;">27</li>
    <li class="set3" style="height: 17px; left: 0px;">17</li>
    
    <li class="set1" style="height: 99px; left: 40px;">99</li> 
    <li class="set2" style="height: 74px; left: 40px;">74</li>
    <li class="set3" style="height: 54px; left: 40px;">54</li>
    
    ...
    
</ul>

You won't always have an appropriate height value to display, in which case you will need to scale the data relative to your desired graph height. This code walks through the process.

1.1 Printing the HTML list using PHP


function printGraph()
{
    $days = array();
    $xOffset = 0;
    $xIncrement = 40; // width of bars
    $graphHeight = 500; // target height of graph
    $maxResult = 1;
    $scale = 1;
    
    // Database Connection Information
    
    // Connect to and select the database
    
    // Get the data and find max values
    $result = mysql_query($query);
    if (!$result) die("no results available!");
    
    while($row = mysql_fetch_assoc($result)) {
        $days[$row['date']] = array( "P1" => $row['priority1']
            , "P2" => $row['priority2']
            , "P3" => $row['priority3']);
    
        //Check if this column is the largest
        $total = $row['total'];
        if($maxResult < $total) $maxResult = $total;
    }
    mysql_free_result($result);
    
    // Set the scale
    $scale = $graphHeight / $maxResult;
    
    echo '<ul class="TGraph">';
    
    foreach($days as $date => $values){
        // Reverse sort the array
        arsort($values);
        
        foreach($values as $priority => $num){ 
            // Scale the height to fit in the graph
            $height = ($num*$scale);
            
            // Print the Bar
            echo "<li class='$priority' style='height: ".$height."px; left: ".$xOffset."px;' title='$date'>$num<br />$priority</li>";
        }
        // Move on to the next column
        $xOffset = $xOffset + $xIncrement;
    }
    echo '</ul>';
}

Styling the graph with CSS

Once you've got your list printed, it is time to turn it into a bar graph. To get you started, Figure 2.0 contains the minimum styles needed to complete the transformation.

2.0 Basic Bar Graph


.verticalBarGraph {
    border-bottom: 1px solid #FFF;
    height: 200px;
    margin: 0;
    padding: 0;
    position: relative;
    }
    
.verticalBarGraph li {
    border: 1px solid #555;
    border-bottom: none;
    bottom: 0;
    list-style:none;
    margin: 0;
    padding: 0;
    position: absolute;
    text-align: center;
    width: 39px;
    }

Adding some Style

Figures 2.1 through 2.3 show the styles used on the example implementation above. There are endless possibilities are endless, these are just a few ideas. Please feel free to share your creations with me, I would be delighted to see them.

2.1 Fancy Bar Graph


.barGraph {
    background: url(images/horizontal_grid_line_50_pixel.png) bottom left;
    border-bottom: 3px solid #333;
    font: 9px Helvetica, Geneva, sans-serif;
    height: 200px;
    margin: 1em 0;
    padding: 0;
    position: relative;
    }
    
.barGraph li {
    background: #666 url(images/bar_50_percent_highlight.png) repeat-y top right;
    border: 1px solid #555;
    border-bottom: none;
    bottom: 0; 
    color: #FFF;
    margin: 0; 
    padding: 0 0 0 0;
    position: absolute;
    list-style: none;
    text-align: center;
    width: 39px;
    }
    
.barGraph li.p1{ background-color:#666666 }
.barGraph li.p2{ background-color:#888888 }
.barGraph li.p3{ background-color:#AAAAAA }

2.2 Faux Line Graph


.fauxLineGraph {
    background: url(images/horizontal_line_2.png) bottom left;
    border-bottom: 3px solid #333; 
    font: 9px Helvetica, Geneva, sans-serif;
    height: 200px;
    margin: 1em 0; 
    padding: 0;
    position: relative; 
    }
.fauxLineGraph li {
    border-top: 3px solid #555; 
    border-bottom: none; 
    color: #000;
    bottom: 0; 
    list-style: none;
    margin: 0; 
    padding: 0 0 0 0;
    position: absolute; 
    text-align: center; 
    width: 39px; 
    }

.fauxLineGraph li.p1{ 
    background: url(images/blue_shadow.png) repeat-x top right;
    border-color: #4E536B; 
    }
.fauxLineGraph li.p2{ 
    background: url(images/red_shadow.png) repeat-x top right; 
    border-color: #355B31;
    }
.fauxLineGraph li.p3{ 
    background: url(images/yellow_shadow.png) repeat-x top right; 
    border-color: #88262B;
    }

2.3 Dotted Graph


.pointGraph {
    background: url(images/horizontal_line_2.png) bottom left;
    border-bottom: 3px solid #333; 
    font: 9px Helvetica, Geneva, sans-serif;
    height: 200px;
    margin: 1em 0; 
    padding: 0;
    position: relative; 
    }
.pointGraph li {
    border-bottom: none; 
    bottom: 0; 
    color: #000;
    margin: 0; 
    padding: 15px 0 0 0;
    list-style: none;
    position: absolute; 
    text-align: center; 
    width: 39px; 
    }

.pointGraph li.p1{ background: url(images/nav_step_1.png) no-repeat top center;}
.pointGraph li.p2{ background: url(images/nav_step_4.png) no-repeat top center; }
.pointGraph li.p3{ background: url(images/nav_step_6.png) no-repeat top center; }