Simple Bar Graphs Made Dynamic with PHP

The simple bar graph shown last week could be utilized to generate charts on the fly. This is great for showing responses from an online survey and other data collection methods. All that's needed is a scripting language such as PHP and direct access to the data.

Background

Let's say we're asked to compare the number of times an application is downloaded from our website to the same time frame last year. The client wants to access the information whenever they want without needing to crunch the numbers themselves.

Building a script to calculate and display the totals would be sufficient. However, we could go a step further and add the simple bar chart from last week (Creating Simple Bar Graphs with HTML). To emphasis the difference between the two time frames, we'll also color the bars.

With having two bars, we need at least two 1×1 pixel images—one for each color. For the time frame with more downloads, we'll use a green swatch (named barGraph_greater.gif). Red can be used for the one with fewer downloads (named barGraph_lesser.gif). A third color could also be created for ties (named barGraph_equal.gif).

Building the Dynamic Graph

For the sake of this example, let's create a couple GET variables to test how the completed bar graph responds to different input. For more information on this testing technique, see Setting up a Makeshift Test Environment for Experimenting with PHP Code.

<?php
//GET THE STATS
$previous_downloads = $_GET['prev'];
$current_downloads  = $_GET['curr'];
?>

Next, we'll figure out which value is larger. That value will be used to calculate the width of each bar.

<?php
//COMPARE THE STATS
if($previous_downloads > $current_downloads) {
     $largerNum = $previous_downloads;
} elseif($previous_downloads < $current_downloads) {
     $largerNum = $current_downloads;
} else {
     $largerNum = $current_downloads;
}
?>

The previous if/else structure is also a good place for initializing the bar colors. Note: the bar graph images are named barGraph_greater.gif, barGraph_lesser.gif, and barGraph_equal.gif. The $previous_color and $current_color variables are assigned part of the image's file name.

<?php
//COMPARE THE STATS
if($previous_downloads > $current_downloads) {
     $largerNum      = $previous_downloads;
     $previous_color = 'greater';
     $current_color  = 'lesser';
} elseif($previous_downloads < $current_downloads) {
     $largerNum      = $current_downloads;
     $previous_color = 'lesser';
     $current_color  = 'greater';
} else {
     $largerNum      = $current_downloads;
     $previous_color = 'equal';
     $current_color  = 'equal';
}
?>

We can now figure out the width for each bar. Note: the code uses the short-hand if() discussed in Getting Your Projects Done Faster by Writing Less Code with the Short-hand if(). The short-hand if() below is used to prevent the division by zero error.

<?php
//CALCULATE THE BAR WIDTHS
$previous_width = ($previous_downloads != 0) ? round($previous_downloads/$largerNum * 100) : 0;
$current_width = ($current_downloads != 0) ? round($current_downloads/$largerNum * 100) : 0;
?>

All that's left, besides testing, is to display the bar graph along with the supporting data.

<?php
//DISPLAY BAR GRAPH
print '<table cellpadding="3" cellspacing="0" border="0">';
print '<tr><th scope="col">Time Frame</th><th scope="col"># of Downloads</th></tr>';
print "<tr><td>Current</td><td><img src='images/barGraph_{$current_color}.gif' alt='' width='$current_width' height='10'> $current_downloads</td></tr>";
print "<tr><td>Previous</td><td><img src='images/barGraph_{$previous_color}.gif' alt='' width='$previous_width' height='10'> $previous_downloads</td></tr>";
print '</table>';
?>

Final Code

<?php
//GET THE STATS
$previous_downloads = $_GET['prev'];
$current_downloads  = $_GET['curr'];
 
//COMPARE THE STATS
if($previous_downloads > $current_downloads) {
     $largerNum      = $previous_downloads;
     $previous_color = 'greater';
     $current_color  = 'lesser';
} elseif($previous_downloads < $current_downloads) {
     $largerNum      = $current_downloads;
     $previous_color = 'lesser';
     $current_color  = 'greater';
} else {
     $largerNum      = $current_downloads;
     $previous_color = 'equal';
     $current_color  = 'equal';
}
 
//CALCULATE THE BAR WIDTHS
$previous_width = ($previous_downloads != 0) ? round($previous_downloads/$largerNum * 100) : 0;
$current_width = ($current_downloads != 0) ? round($current_downloads/$largerNum * 100) : 0;
 
//DISPLAY BAR GRAPH
print '<table cellpadding="3" cellspacing="0" border="0">';
print '<tr><th scope="col">Time Frame</th><th scope="col"># of Downloads</th></tr>';
print "<tr><td>Current</td><td><img src='images/barGraph_{$current_color}.gif' alt='' width='$current_width' height='10'> $current_downloads</td></tr>";
print "<tr><td>Previous</td><td><img src='images/barGraph_{$previous_color}.gif' alt='' width='$previous_width' height='10'> $previous_downloads</td></tr>";
print '</table>';
?>

Examples

When curr=73 and prev=33, the graph looks like the following:

Time Frame	# of Downloads
Current	73
Previous	33

When curr=40 and prev=50, the graph looks like the following:

Time Frame	# of Downloads
Current	40
Previous	50

When curr=50 and prev=50, the graph looks like the following:

Time Frame	# of Downloads
Current	50
Previous	50