Brainsofsteel header

Creating a Charity Target Barometer in PHP

Subject: Programming

Description: Creating a Charity Target Thermometer or Barometer in PHP


submit to reddit Posted by David Caldwell on 17/05/13 at 20:54

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 Smile

 

Keywords: Barometer, Charity, Target, PHP, Web design, Fundraising, thermometer




comments powered by Disqus

 Subscribe in a reader

RSS Feed

Latest Posts

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
10/09/14
How to Learn the Nine Times Table
09/08/14
How to Calculate the Direction between two Points
01/08/14
Making a large Google XML sitemap
18/05/14
How to make a pyramid