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.

First, an Example

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

57

27

17

144

74

54

153

93

73

152

92

68

152

92

72

160

100

58

155

90

50

150

80

62

157

87

70

167

97

66

180

110

92

180

110

95

192

122

91

190

126

95

183

130

95

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