How would I go about making a charitable target indicator using php

I'm trying to create an app a little bit like JustGiving.com, which allows people who want to raise money for charity to sign up and create a 'campaign' page. On this page they outline what they propose to do (run a marathon or shave their heads for example) set a monetary target and then invite all their friends to sponsor them via email, twitter, facebook etc...

Friends come on and donate via paypal and the target gets nearer.

I want to make some kind of indicator to show how close to the target the campaign is. I'm not asking for help with graphics here but I had in mind a kind of thermometer arrangement that you might see on your local church fundraiser http://ww开发者_开发百科w.google.co.uk/search?q=target+thermometer&hl=en&prmd=ivns&tbm=isch&tbo=u&source=univ&sa=X&ei=-RfdTYrcEs-2hAeW65y3Dw&ved=0CDcQsAQ&biw=1280&bih=685

I'm building this site in an effort to learn cakephp, and I have to admit my knowledge of php isn't all that brilliant either so learning that too. I'm surprised how far I've got.

Anyway, I haven't a notion how I might go about doing this and wondered if some kind soul would give me a bit of a route map. If it's a cakephp route thats great but if it's just normal php thats cool too!

Here's how I did it for tescoforschoolsandclubs.co.uk

You have two images. One has the full thermometer, one has the empty thermometer.

Use the empty one as the background to a div, and absolutely position and image with the the full thermomenter bottom, right on top of the empty one.

You can then set the height of the full image to reflect the %

e.g.

<div id='thermometer'>
<img src='full'>
</div>

#thermometer {
  width: 100px;
  height: 200px;
  position: relative;
  background: url(empty.jpg) no-repeat top left;
}
#thermometer img{
  position: absolute;
  bottom: 0;
  left: 0;
}

and then:

#thermometer img{
  height: 0; /* completely empty */
}
#thermometer img {
  height: 100px; /* 50% */
}
#thermometer img {
  height: 200px; /* 100% */
}

You can calculate the height of the 'full' image based on

height = (height of image / 100) * percentage

I would do this with JavaScript and/or CSS on the client side and all the php would need to do would be to supply the current total and the target. Then let the JavaScript calculate how 'hot' to display the thermometer is and how to draw it.

Not familiar with Cake specifically, but here is how I would do it:

• 2 images - thermometer with transparent indicator, behind it a solid red block.
• Calculate heat in your controller & pass it to your view
• Style the red block using inline css

like so:

  <img src="red.gif" style="height: <?php echo $bar_height ?> ">

You could also calculate the percentage and use the jQuery UI Progress Bar. It wouldn't be vertical (I don't think), and it wouldn't have the bulbous tip like a thermometer, but it would make things simpler and you could dynamically change it after a donation, or through AJAX when other donations come in.