# Thread: calculate a percentage and display it graphically

1. ## calculate a percentage and display it graphically

Hi

What im trying to do is have an image with a meter on it that is blank but based on a percentage value calculated by adding a list of figures from a databse and calculating the percentage of a total goal etc

What im struggling with is how to turn this percentage figure into a colored bar that represents that much percent of the total height of the meter etc

So when 50 of the goal is reached the bar would be half way up

I am unsure how to make it move in increments liek that

Previously i have used multiple images displaying one based on how much the total percentage is and stuff but having 100 images for each percentage is a bit tedious so i wanted to just leave a blank space in the image and use only one image

Then have php or dhtml or something generate a colored bar a certain height based on the percentage and have it appear in the right place

Any help at all would be very welcomed thanks

2. PHP Code:
\$top=200//200 pixels
\$current=.5//percentage

\$height=\$current*\$top;

echo
"<img src='blue_bar.gif' width='5' height='{\$height}'>"
Does that give you any clues?

3. but how would i make sure that image was always positioned in the right place over the top of another image and that it always has the same positioning from the bottom so as the height grows it grows upwards not downwards

Seems complex i may just go with making the multiple images instead

4. I'd probably use CSS (just a rough draft to get you started):
PHP Code:
div #map {position:relative; height:200px; width:400px; border:1px solid black;}
div #map img {position:absolute; bottom:0;}

<div id='map'>
while(
there is something to loop through){

echo
"<img src='blue_bar.gif' width='5' height='{\$height}'>"
...
}
</
div