www.webdeveloper.com
Results 1 to 4 of 4

Thread: calculate a percentage and display it graphically

  1. #1
    Join Date
    Sep 2006
    Location
    Wixom, MI
    Posts
    292

    Smile 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. #2
    Join Date
    Oct 2005
    Location
    California
    Posts
    603
    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. #3
    Join Date
    Sep 2006
    Location
    Wixom, MI
    Posts
    292
    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. #4
    Join Date
    Oct 2005
    Location
    California
    Posts
    603
    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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles