[SOLVED] Progress bar

[Sir Softsand]

Hi everyone,

 

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

 

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]

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]

Thanks a lot! I'll check it out.

[per1os]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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

[redarrow]

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]

Halfway there, made 50 bar images

[kenrbnsn]

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]

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]

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]

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

[Sir Softsand]

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

[Sir Softsand]

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]

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]

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]

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.