Vertical Bar Graphs with CSS and PHP

Graficas de Barras Verticales con CSS y PHP

Este articulo muestra como usar PHP y CSS para poder generar graficas de barras solapadas, que muestran el numero de valor que ilustran, y a nivel comparativo. Al usar PHP, la funcion genera un array con los datos preparados para ser representados mediante el CSS. Los maximos de la grafica aunque a nivel visual son fijos, es decir, la grafica siempre tiene el mismo tamaño, los limites representados son distintos en funcion del valor maximo que recupera la funcion desde MYSQL o desde otro origen de datos. El resto de los datos se ajusta y proratea en funcion de este valor maximo.

Toda la informacion despues del salto.

Inspired by: Eric Meyer, and necessity.
Who wants to use Excel to make a new graph each week? Using CSS and PHP you can create attractive bar graphs (yes, even the stacked kind) that are always up to date.

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

Creating the List, using PHP

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

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

1.0 Desired HTML

<ul class="barGraph">

 <li class="p1" style="height: 57px; left: 0px;">57</li>
 <li class="p2" style="height: 27px; left: 0px;">27</li>
 <li class="p3" style="height: 17px; left: 0px;">17</li>
 
 <li class="p1" style="height: 99px; left: 40px;">99</li> 
 <li class="p2" style="height: 74px; left: 40px;">74</li>
 <li class="p3" 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; }