 |
 |
|
|
I was asked to design a graphic for a parents association charity website who wanted to show progress of fundraising against a target. The convention is to show the money as rising mercury in a thermometer or barometer. The challenge was to do this automatically; all the website editor was expected to do was input the fundraising target and then update how much money was raised.
The first step was to create a graphic in Gimp, and then create four sections to create the top of the barometer, a white segment, a red segment and the base of the barometer.
The initial graphic
The barometer top
A red segment
A white segment
The base of the barometer
The idea was to create a while loop where if the amount raised was less than the current count then a red segment would be displayed if the count was higher a white segment would be displayed.
The first line of code initialises a table to keep our graphics in line; borders and padding are set at zero to prevent gaps.
<table width="100%" border="0" cellpadding="0" cellspacing="0">
PHP code is started and variables are declared, the fundraising total is turned into a percentage with units defined as 10%, the amount raised is then converted into a percentage of the target total
<?php
$target = 2000;
$amount_raised = 1500;
$target_units = (2000 / 100) * 10;
$raised_units = (1500 / 2000) * 100;
$to_go = $target - $amount_raised;?>
HTML setting out the table rows and displaying the fundraising target and the top of the barometer.
<tr>
<td><H3 align="center">Target = £<? echo $target; ?> </H3></td>
</tr>
<tr>
<td><div align="center"><img src="barometer_top.png" /></div></td>
</tr>
The counter is initialised at 100 for 100% and the while loop is started, table rows are generated for each 10% segment, and a red or white image is displayed depending on the 'If' condition. The counter is decremented by 10 in each itteration.
<?php
$counter = 100;
while($counter > 0)
{
echo "<tr>";
if ($counter < $raised_units)
{
echo " <td><div align="center"><img src="red.png" alt="amount raised = £".$amount_raised.""></td></div>";
}
else
{
echo " <td><div align="center"><img src="white.png" alt="amount needed to reach target = £".$to_go.""></td></div>";
}
$counter = $counter - 10;
echo "</tr>";
}
?>
The bottom of the barometer is displayed, the table closed and the amount raised is displayed.
<tr>
<td><div align="center"><img src="barometer_base.png" /></div></td>
</tr>
<tr>
<td><H3 align="center">Amount Raised = £<? echo $amount_raised; ?></H3></td>
</tr>
</table>
Working example
Complete code
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<?php
$target = 2000;
$amount_raised = 1500;
$target_units = (2000 / 100) * 10;
$raised_units = (1500 / 2000) * 100;
$to_go = $target - $amount_raised;?>
<tr>
<td><H3 align="center">Target = £<? echo $target; ?> </H3></td>
</tr>
<tr>
<td><div align="center"><img src="barometer_top.png" /></div></td>
</tr>
<?php
$counter = 100;
while($counter > 0)
{
echo "<tr>";
if ($counter < $raised_units)
{
echo " <td><div align="center"><img src="red.png" alt="amount raised = £".$amount_raised.""></td></div>";
}
else
{
echo " <td><div align="center"><img src="white.png" alt="amount needed to reach target = £".$to_go.""></td></div>";
}
$counter = $counter - 10;
echo "</tr>";
}
?>
<tr>
<td><div align="center"><img src="barometer_base.png" /></div></td>
</tr>
<tr>
<td><H3 align="center">Amount Raised = £<? echo $amount_raised; ?></H3></td>
</tr>
</table>
Thanks for reading 
Keywords: Barometer, Charity, Target, PHP, Web design, Fundraising, thermometer
Latest Posts |
| 27/04/20 |
| How to Make a Model Anderson Shelter |
| 25/04/20 |
| How to make a Model Roman Villa |
| 15/04/20 |
| How to Make a Tetrahedron |
| 07/04/20 |
| Octahedrons and how to draw their net |
| 17/11/15 |
| How to Create a Time Sheet in Excel |
| 15/11/15 |
| Handling time and dates in PHP |
| 03/02/15 |
| How to Enhance Photographs with the Gimp |
| 25/01/15 |
| How to Cook Pigeon |
| 25/01/15 |
| Telling the Time |
| 24/01/15 |
| An Old Travel Card |