Easy PHP and Html Bar Graph

I want to show you a quick and simple way to create a bar graph using HTML.

You need a graphic file that’s just 1 pixel wide and 5 px tall. Make it whatever color you want your bars to be. I named mine CountBar.gif.

In my example, I have an array of data for each month, containing sales. The key part to the whole concept can be seen here: (the table was created prior to this code block, and is ended after, I am just showing you the relevant section.

Basically, we loop through each month, $arrMonths contains the string values of each month like “January”, ect. $arrResults[$i]; contains the sales values for each corresponding month. (don’t get confused by my arrays, just focus on the concept).

The Key part is here: We set the width of the graphic equal to the amount of sales for the month divided by a static variable (we use this to keep the widths in a relative range, in this case, i know my sales data ranges from 0-50,000 so I want the width of my graph to go from 0-500 pixels)

<img src=”countBar.gif” width=”<?php echo intval($arrResults[$i] / 100);
$total += $arrResults[$i]; ?>” height=”5″ class=”chart”>

<?php

$total = 0;

for ($i = 0; $i < 12; $i++) {
?>
<tr>
<td width=”15%” height=”12″ align=”left” valign=”middle”><?php echo $arrMonths[$i + 1].” “;?></td><td width=”15%” height=”12″ align=”left” valign=”middle”>$<?php echo ” “.$arrResults[$i]; ?>: </td>
<td width=”70%” height=”12″><img src=”countBar.gif” width=”<?php echo intval($arrResults[$i] / 100);
$total += $arrResults[$i]; ?>” height=”5″ class=”chart”></td>
</tr>
<?php
}
?>

And you can get something like this: ( i have marked out the  actual values on purpose)