PHP Percentage Bar

MySQL Table, used for example.

CREATE TABLE IF NOT EXISTS `percent` (
`per_id` int(11) NOT NULL auto_increment,
`per_num` varchar(255) NOT NULL,
PRIMARY KEY (`per_id`)
) ENGINE=InnoDB;

1. Lets start with the MySQL Connection, I named this file dbcommon.php. Besure to change the username, password and database to your own.

mysql_connect("localhost", "username", "password") or die(mysql_error());
mysql_select_db("databasename") or die(mysql_error());

2. function.php will contains the script for the query and bar. I setup the 4 function examples as in the demo.

function percent_full(){

  $result = mysql_query("SELECT * FROM percent")
  or die(mysql_error());

	 while($full = mysql_fetch_array( $result )) {
		echo '

'.($full['per_num']).'%
id:'.($full['per_id']).'


';
	 } 

}

function percent_button(){

  $result = mysql_query("SELECT * FROM percent")
  or die(mysql_error());

	 while($button = mysql_fetch_array( $result )) {
		echo '


';
	 }

}

function percent_donation_full(){

  $result = mysql_query("SELECT * FROM percent WHERE per_id=18")
  or die(mysql_error());

	 while($donation_full = mysql_fetch_array( $result )) {
		echo '


 $'.($donation_full['per_num']).'



';
	 } 

}

function percent_donation_button(){

  $result = mysql_query("SELECT * FROM percent WHERE per_id=18")
  or die(mysql_error());

	 while($donation_button = mysql_fetch_array( $result )) {
		echo '


 $'.($donation_button['per_num']).'



';
	 } 

}

3. style.css page will control the way the bars are shown.

@charset "utf-8";
#no-margin {
margin:0px;
}
/* Begin Percentage Bar Full */
#bar_wrap_full {
width:24px;
height:106px;
background:url(img/measure.gif) no-repeat right;
font-size:9px;
font:Arial, Helvetica, sans-serif;
color:#999;
float:left;
margin-right:20px;
}

#bar_wrap_full div.top {
width:20px;
height:3px;
background:url(img/bar_top.gif) no-repeat;
}

#bar_wrap_full div.center {
width:20px;
background:url(img/bar_cent.gif) repeat-y;
}

#bar_wrap_full div.bottom {
width:20px;
height:3px;
background:url(img/bar_bot.gif) no-repeat;
}

#bar_wrap_full div.num {
text-align:center;
}

#bar_wrap_full div.overlay {
background:url(img/lines.png) no-repeat;
width:24px;
height:106px;
}
/* End Percentage Bar Full */

/* Begin Percentage Bar Button */
#bar_wrap_button {
width:24px;
height:106px;
background: url(img/measure_buttons.gif) no-repeat right;
font-size:9px;
font:Arial, Helvetica, sans-serif;
color:#999;
float:left;
margin-right:20px;
}

#bar_wrap_button div.top {
width:20px;
height:3px;
background:url(img/bar_top.gif) no-repeat;
}

#bar_wrap_button div.center {
width:20px;
background:url(img/bar_cent.gif) repeat-y;
}

#bar_wrap_button div.bottom {
width:20px;
height:3px;
background:url(img/bar_bot.gif) no-repeat;
}

#bar_wrap_button div.num {
text-align:center;
}

#bar_wrap_button div.overlay {
background: url(img/stripes.png) bottom;
width:24px;
height:auto;
}

/* End Percentage Bar Button */

/* Begin Percentage Bar Full */
#bar_wrap_donation_full {
width:24px;
height:106px;
background:url(img/measure.gif) no-repeat right;
font-size:9px;
font:Arial, Helvetica, sans-serif;
color:#999;
float:left;
margin-right:20px;
}

#bar_wrap_donation_full div.top {
width:50px;
height:3px;
background:url(img/bar_top.gif) no-repeat left;
}

#bar_wrap_donation_full div.center {
width:20px;
background:url(img/bar_cent.gif) repeat-y;
}

#bar_wrap_donation_full div.bottom {
width:20px;
height:3px;
background:url(img/bar_bot.gif) no-repeat;
}

#bar_wrap_donation_full div.num {
text-align:center;
margin-left:20px;
line-height:0;
}

#bar_wrap_donation_full div.overlay {
background:url(img/lines.png) no-repeat;
width:24px;
height:106px;
}
/* End Percentage Bar Full */

/* Begin Percentage Bar button */
#bar_wrap_donation_button {
width:24px;
height:106px;
background:url(img/measure_buttons.gif) no-repeat right;
font-size:9px;
font:Arial, Helvetica, sans-serif;
color:#999;
float:left;
margin-right:20px;
}

#bar_wrap_donation_button div.top {
width:50px;
height:3px;
background:url(img/bar_top.gif) no-repeat left;
}

#bar_wrap_donation_button div.center {
width:20px;
background:url(img/bar_cent.gif) repeat-y;
}

#bar_wrap_donation_button div.bottom {
width:20px;
height:3px;
background:url(img/bar_bot.gif) no-repeat;
}

#bar_wrap_donation_button div.num {
text-align:center;
margin-left:20px;
line-height:0;
}

#bar_wrap_donation_button div.overlay {
background:url(img/lines.png) no-repeat;
width:24px;
height:106px;
}
/* End Percentage Bar Full */

4. index.php
Lets add the database connection and functions.

include('dbcommon.php');
include('function.php');

in the body we will call the functions.

percent_full();

percent_button();

percent_donation_full();

percent_donation_button();

---

• Tweet