Thermometer / Goal Graph

Friends Of Scouting (FOS) and many other community / organizational goal setting situations use a big red thermometer to show the current status of the fund raising campaign (and other things).  Since we have used this graphic (abet hand drawn) in our council for several years, it made sense to use it on our web site to show the current status of our FOS campaign.  Unfortunately, I wasn't able to find an "off the shelf" way to generate the graph on the fly.  Suggestions were made to "generate it out of Excel" - which would have worked, but would have required editing the Excel spread sheet, generating the graphs and then manually uploading them to the web server or putting the spread sheet on the web server and only letting people who have Excel view it.  Neither option seemed like a good alternative.

The solution was to write a small PHP script that could be called to build the graphic on the fly.  The script is called as the source of an image tag.  It expects the following parameters:

Current - Current Amount Raised  (eg. 3000)
Goal - Goal Amount (eg. 10000)
Width - Width of the chart in pixels (60 is a good start)
Height - Height of the chart in pixels (150 is a good start)
Font - The font used (1=small, 2=bigger...)

To generate the graph at the right using the above example setting, the script would be called from your html as follows (assuming you have named the script thermometer.php and it's in the same directory as the html file):

<img border="0" src="thermometer.php?Current=3000&Goal=10000&Width=60&Height=150&Font=1">

-------- Script Starts Here -------
<?php

// This work is licensed under the Creative Commons Attribution 2.5 License. 
// To view a copy of this license, visit 
// http://creativecommons.org/licenses/by/2.5/ 
// or send a letter to Creative Commons, 543 Howard Street, 5th Floor, 
// San Francisco, California, 94105, USA.
//
// Attribution (do not remove): 
//    Original Creation of Arkie.Net - http://www.arkie.net/~scripts/
//

function thermGraph( $current, $goal, $width, $height, $font ) {

 $bar = 0.50;

 // create the image
 $image = ImageCreate($width, $height);
 $bg    = ImageColorAllocate($image,255,255,255 );
 $fg    = ImageColorAllocate($image,255,0,0);
 $tx    = ImageColorAllocate($image,0,0,0);

 //  Build background
 ImageFilledRectangle($image,0,0,$width,$height,$bg);

 //  Build bottom bulb
 imagearc($image, $width/2, $height-($width/2), $width, $width, 0, 360, $fg);
 ImageFillToBorder($image, $width/2, $height-($width/2), $fg, $fg);

 //  Build "Bottom level
 ImageFilledRectangle($image,
                      ($width/2)-(($width/2)*$bar),
                      $height-$width,
                      ($width/2)+(($width/2)*$bar),
                      $height-($width/2),
                      $fg );

 //  Draw Top Border
 ImageRectangle( $image,
                 ($width/2)-(($width/2)*$bar),
                 0,
                 ($width/2)+(($width/2)*$bar),
                 $height-$width,
                 $fg);

 //  Fill to %
 ImageFilledRectangle( $image,
                 ($width/2)-(($width/2)*$bar),
                 ($height-$width) * (1-($current/$goal)),
                 ($width/2)+(($width/2)*$bar),
                 $height-$width,
                 $fg );

 //  Add tic's
 for( $k=25; $k<100; $k+=25 ) {

     ImageFilledRectangle( $image,
            ($width/2)+(($width/2)*$bar) -5,
            ($height-$width) - ($height-$width)*($k/100) -1,
            ($width/2)+(($width/2)*$bar) -1,
            ($height-$width) - ($height-$width)*($k/100) +1, $tx );


     ImageString($image, $font,
            ($width/2)+(($width/2)*$bar) +2,
            (($height-$width) - ($height-$width)*($k/100)) - (ImageFontHeight($font)/2),
            sprintf( "%2d", $k),$tx);
 }

 // Add % over BULB
 $pct = sprintf( "%d%%", ($current/$goal)*100 );

 ImageString( $image, $font+2, ($width/2)-((strlen($pct)/2)*ImageFontWidth($font+2)),
    ($height-($width/2))-(ImageFontHeight($font+2) / 2),
    $pct, $bg);


 // send the image
 header("content-type: image/png");
 imagepng($image);
}

 thermGraph(
    $HTTP_GET_VARS["Current"],
    $HTTP_GET_VARS["Goal"],
    $HTTP_GET_VARS["Width"],
    $HTTP_GET_VARS["Height"],
    $HTTP_GET_VARS["Font"] );

?>
-------- Script Ends Here -------

This work is licensed under a Creative Commons Attribution 2.5 License.

Feedback