[SOLVED] Progress bar

Sir Softsand · May 29, 2007

Hi everyone,

I'd like to make a progress bar like this one:

progress.php?score=0 progress.php?score=30 progress.php?score=70 progress.php?score=100

When you look at the URL you can choose a number from 0 to 100. 100 is a full bar and 0 is an empty bar. I'd like to make this too, but the only php bar tutorials I can find are upload bars. That's not what I need! I want a bar like this where the user can choose how much the bar is filled. How can I do this? ???

Wildbug · May 29, 2007

Look at the image functions. You'll be able to generate a bar based on a user-supplied percentage with those. You'll need to install gd if your PHP didn't come with it or you haven't already done so.

Sir Softsand · May 29, 2007

Thanks a lot! I'll check it out.

per1os · May 29, 2007

Using GET method or SESSIONS.

<?php
if (isset($_GET['status'])) {
    if ($_GET['status'] < 25) {
        $bar = 'no-bar.jpg';
    }elseif ($_GET['status'] < 50) {
         $bar = 'quarter-bar.jpg';
    }elseif ($_GET['status'] < 75) {
         $bar = '3quarter-bar.jpg';
    }elseif ($_GET['status'] <= 100) {
         $bar = 'ful-bar.jpg';
    }
}else {
   $bar = 'no-bar.jpg';
}

echo '<img src="' . $bar . '" />';
?>

Broniukas · May 29, 2007

maybe somethin like this

$status = $_GET['status'];
$status2 = 100 - $_GET['status'];
echo '<img src="img_green.jpg" width="' . $status. '%"><img src="img_white.jpg" width="' . $status2. '%">';

or try image functions...

Sir Softsand · May 29, 2007

Using GET method or SESSIONS.

<?php
if (isset($_GET['status'])) {
    if ($_GET['status'] < 25) {
        $bar = 'no-bar.jpg';
    }elseif ($_GET['status'] < 50) {
         $bar = 'quarter-bar.jpg';
    }elseif ($_GET['status'] < 75) {
         $bar = '3quarter-bar.jpg';
    }elseif ($_GET['status'] <= 100) {
         $bar = 'ful-bar.jpg';
    }
}else {
   $bar = 'no-bar.jpg';
}

echo '<img src="' . $bar . '" />';
?>

Do I have to enter 100 bar images? or does the echo do the filled bar between half bar and 3 quarter bar and like that?

redarrow · May 29, 2007

this is an example using gd to do all the work.

this example is my code that each time a users profile get looked at the result is displayed as a bar.



//this gets put on the page where the members area is to see the sats put it on a nice profile page.

<?php session_start();

$db=mysql_connect("localhost","xxxx","xxxx");
mysql_select_db("xxxx",$db);



$query5 = "SELECT `jan`, `feb`, `mar`, `apr`, `may`, `jun`, `jul`, `aug`, `sep`, `oct`, `nov`, `dec` FROM hits where id='$id'";

$result5 = mysql_query($query5);

while($data = mysql_fetch_assoc($result5)){

echo "<table>\n";
foreach ($data as $month => $hits) {
    echo "<tr>
            <td>$month</td>
            <td><img src='bar.php?val=$hits&max=1000'></td>
            <td>$hits</td>
            </tr>\n";
}
}
echo "</table>\n";
?>




//this is bar.php that produces the stats image and links to the above.



<?php
// set dimensions
     $w = 300;
     $h = 12;
// create image
     $im = imagecreate($w, $h);
// set colours to be used
     $bg = imagecolorallocate($im, 0xE0, 0xE0, 0xE0);
     $black = imagecolorallocate($im, 0x00, 0x00, 0x00);
     $barcolor  = imagecolorallocate($im, 0xFF, 0xFF, 0x00);
// draw border
     imagerectangle($im, 0,0,$w-1,$h-1,$black);
// get value and max value from query string
     $val = $_GET['val'];
     $max = $_GET['max'];
// calculate dimensions of inner bar
     $barw = $max ? floor(($w-2) * $val / $max) : 0;
     $barh = $h - 2;
// draw inner bar
 if ($barw)
     	imagefilledrectangle($im, 1, 1, $barw, $barh, $barcolor);
// send image header
     header("content-type: image/png");
// send png image
     imagepng($im);
     imagedestroy($im);
?>



//this link goes on a page that shows the search profile results.


<a href='profile.php?name=<?echo $record['name'];?>&cmd=hit'>


//make the following database.

id smallint(5)  UNSIGNED ZEROFILL Yes NULL                
  jan varchar(100)  No                 
  feb varchar(100)  No                 
  mar varchar(11)   No                 
  apr varchar(100)  No                 
  may varchar(100)  No                 
  jun varchar(100)  No                 
  jul varchar(100)  No                 
  aug varchar(100)  No                 
  sep varchar(100)  No                 
  oct varchar(100)  No                 
  nov varchar(100)  No                 
  dec varchar(11)   No 


//this goes on the page that the prfile of the member your looking at is.
<?php session_start();

$db=mysql_connect("localhost","xxx","xxx");
mysql_select_db("xxxx",$db);

$name=$_GET['name'];

$query="select * from xxxxx where name='xxxx'";
$result=mysql_query($query);

while($record=mysql_fetch_assoc($result)){

if($_GET['cmd']=="hit"){

$colname=($_POST['colname']);

$colname=date('M');

$query1="select * from hits where id='".$record['id']."'";
$result1=mysql_query($query1)or die("query problam");

if(!mysql_num_rows($result1)){

$id=$record['id'];
$jan="1";
$feb="1";
$mar="1";
$apr="1";
$may="1";
$jun="1";
$jul="1";
$aug="1";
$sep="1";
$oct="1";
$nov="1";
$dec="1";

$insert="insert into hits (`id`, `jan`, `feb`, `mar`, `apr`, `may`, `jun`, `jul`, `aug`, `sep`, `oct`, `nov`, `dec`)values('$id','$jan','$feb','$mar','$apr','$may','$jun','$jul','$aug','$sep','$oct','$nov','$dec')";
$in=mysql_query($insert)or die("insert problam");

}elseif(mysql_num_rows($result1)>0){

$update="update hits set $colname=$colname+1 where id='".$record['id']."'";


$resultu=mysql_query($update)or die("update problam");
}
}
?>

per1os · May 29, 2007

Using GET method or SESSIONS.

<?php
if (isset($_GET['status'])) {
    if ($_GET['status'] < 25) {
        $bar = 'no-bar.jpg';
    }elseif ($_GET['status'] < 50) {
         $bar = 'quarter-bar.jpg';
    }elseif ($_GET['status'] < 75) {
         $bar = '3quarter-bar.jpg';
    }elseif ($_GET['status'] <= 100) {
         $bar = 'ful-bar.jpg';
    }
}else {
   $bar = 'no-bar.jpg';
}

echo '<img src="' . $bar . '" />';
?>

Do I have to enter 100 bar images? or does the echo do the filled bar between half bar and 3 quarter bar and like that?

Using that code yes, to avoid that use the image functions to create the images. Best bet if that is what you want.

Sir Softsand · May 29, 2007

Isn't this:

    }elseif ($_GET['status'] <= 100) {
         $bar = 'ful-bar.jpg';
    }

Supposed to be this?:

    }elseif ($_GET['status'] < 100) {
         $bar = 'ful-bar.jpg';
    }

The <= 100 change to < 100

per1os · May 29, 2007

If you do not want 100 included as the full-bar sure. This way if it is in the range of 76 to 100 the full-bar is displayed. With the "supposed" to be method you posted if the value was 100 it would not display anything as $bar would not be defined.

Sir Softsand · May 29, 2007

Ok, I'm using this code. I still have to make the bar images and change every bar.jpg to the correct bar.

<?php
if (isset($_GET['status'])) {
    if ($_GET['status'] < 1) {
        $bar = 'bar1.jpg';
    }elseif ($_GET['status'] < 2) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 3) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 4) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 5) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 6) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 7) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] <  {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 9) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 10) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 11) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 12) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 13) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 14) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 15) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 16) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 17) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 18) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 19) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 20) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 21) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 22) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 23) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 24) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 25) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 26) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 27) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 28) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 29) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 30) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 31) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 33) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 34) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 35) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 36) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 37) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 38) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 39) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 40) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 41) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 42) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 43) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 44) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 45) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 46) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 47) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 48) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 49) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 50) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 51) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 52) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 53) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 54) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 55) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 56) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 57) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 58) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 59) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 60) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 61) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 62) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 63) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 64) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 65) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 66) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 67) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 68) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 69) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 70) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 71) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 72) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 73) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 74) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 75) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 76) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 77) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 78) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 79) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 80) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 81) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 82) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 83) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 84) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 85) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 86) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 87) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 88) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 89) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 90) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 91) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 92) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 93) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 94) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 95) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 96) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 97) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 98) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] < 99) {
         $bar = 'bar.jpg';
    }elseif ($_GET['status'] <= 100) {
         $bar = 'bar.jpg';
    }
}else {
   $bar = 'bar0.jpg';
}

echo '<img src="' . $bar . '" />';
?>

kenrbnsn · May 29, 2007

The following is a quick PHP/HTML script I just put together that utilizes CSS to draw a progress bar. See if it can fit into your script:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Progress Bar Test</title>
<style>
.bar {
  display: block;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid black;
  height: 1em;
}
.pbar {
  display: block;
  background-color: green;
  float: left;
  height: 1em;
}
</style>
</head>
<body>
<div class="bar">
<?php
  $pbar_width = (isset($_GET['w']))?$_GET['w']:10;
  echo '<span class="pbar" style="width:' . $pbar_width . '%;"> </span>';
?>
<div style="clear:both;line-height:0.01em"> </div>
</div>
</body>
</html>

I've uploaded the test script to http://www.rbnsn.com/phpfreaks/progress_bar.php

Try it with different value of "w" on the url:

http://www.rbnsn.com/phpfreaks/progress_bar.php?w=99

http://www.rbnsn.com/phpfreaks/progress_bar.php?w=1

http://www.rbnsn.com/phpfreaks/progress_bar.php?w=45

http://www.rbnsn.com/phpfreaks/progress_bar.php?w=49.9

http://www.rbnsn.com/phpfreaks/progress_bar.php?w=50.1

Ken

taith · May 29, 2007

wow... theres the long way of doing it...

echo '<div style="background:blue;width:200px;"><span style="background:green;width:20px;"></div>'; #2-1 scale... 20px=10%

Sir Softsand · May 29, 2007

Well, I'm using my code now, but thanks anyway.

redarrow · May 29, 2007

kenrbnsn that code is driving me mad your a true pro (as i add it to a project lol).

If you got time brake it all down i am so inpressed as

i am currently learning css on a advance level that's blown my mind lol.

Sir Softsand · May 29, 2007

Halfway there, made 50 bar images

kenrbnsn · May 29, 2007

Why make all of the images, waste space on the server, and waste bandwidth, when it can be done simply and dynamically with CSS or GD?

Ken

Wildbug · May 29, 2007

Well, I'm using my code now, but thanks anyway.

You're using 100 images and 100 if statements? Are you insane?

Btw, Ken, nice solution.

redarrow · May 29, 2007

sorry but you need to use my gd or css example it a wast of resources man lol?

css faster

gd faster

selecting images slower

and as said all them if statements if your going to do it the slow way use a switch.

Sir Softsand · May 29, 2007

Had to delete the bars, somethins went wrong while saving them. I'll just use the CSS way then.

Sir Softsand · May 29, 2007

With the CSS way: width: 50% it's so wide, I want it 102 px wide and 12 px high.

Sir Softsand · May 29, 2007

And another thing I want: when I add ?score=0 I want it to be empty and with score=10 or score=20 ... I want it to be filled that amount of pixels.

kenrbnsn · May 29, 2007

Change:

.bar {
  display: block;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid black;
  height: 1em;
}

to

.bar {
  display: block;
  width: 102px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid black;
  height: 12px;
}

You might want to remove the "margin-left" and "margin-right" attributes. Those are there to center the bar on the page.

In my example, I used "w" on the URL, just use "score" instead.

Ken

Sir Softsand · May 29, 2007

K, thx. I don't need the bar to be centered on the page. I just want to use it in sigs on fora.

Sir Softsand · May 29, 2007

Now I want to be able to change the fill amount of the bar by adding ?score= and the number after that in the URL.

Sign In

[SOLVED] Progress bar

Recommended Posts

Link to comment

Share on other sites

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information