Server Side PHP
You have several options here. I used this to show sales reps the progress of their monthly goals. Obviously the sky is the limit.
We need to have some sort of starting point (low value), the median (middle value), and the end point (high value).
For server side, I will be using PHP.
Now, you can obviously get the upper and lower bounds any which way you want, we'll use a quick query to our handy dandy MySQL database to retrieve this info.
<?
/* insert your own connection info here */
$sql = "SELECT * FROM progress WHERE sales_rep = 'shawn' LIMIT 0,1";
$results = mysql_query($sql);
$num_rows = @mysql_num_rows($results);
if($num_rows == 1){
$pm_data = @mysql_fetch_assoc($results);
$upper_bound = $pm_data['goal'];
$progress_amount = $pm_data['actual'];
$median = $upper_bound / 2;
/* if our upper bound is greater than the goal,
we need to display that somehow to our user */
$class = ($progress_amount >= $upper_bound) ? ' class="beyond"' : '';
$percent_complete = ($progress_amount / $upper_bound) * 100;
$percent_complete = $percent_complete > 100 ? 100 : $percent_complete;
$median = '$'.number_format($median,0,'',',');
$upper_bound = '$'.number_format($upper_bound,0,'',',');
$progress_amount = '$'.number_format($progress_amount,0,'',',');
$show_progress_meter = true;
}
?>
jQuery of course.
$(document).ready(function(){ makes sure the page is loaded before we start calling jQuery functions.
$("#mercury").animate({width: "<?=$percent_complete?>%"}, 1000 ); the first parameter to the animate function is the css we're modifying. The second param is the number of miliseconds we want this animation to take.
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){ // on document load
// Using multiple unit types within one animation.
$("#mercury").animate({width: "<?=$percent_complete?>%"}, 1000 ); // animate a div
});
</script>
The CSS
<style type="text/css">
* {margin:0pt;padding:0pt;}
body {font-family:Arial,Helvetica,sans-serif;font-size:12px;}
#progress {height:34px;margin-bottom:11px;}
.pad {margin:0pt auto;width:900px;}
#progress h3 {float:left;height:22px;margin:6px 6px 0pt 0pt;width:106px;}
.hide {float:left;margin-left:-999em;}
#progressBar {background:transparent url(sliderimages/progressBg.gif) repeat-x scroll left top;border:1px solid #000000;float:left;height:16px;margin-top:7px;width:608px;}
#progressBar #mercury {width:0%;}#progressBar #mercury {background:transparent url(sliderimages/mercuryBg.gif) repeat-x scroll left top;border-right:1px solid #AC7B00;height:16px;}
#progressBar #mercury span {display:block;float:right;font-size:10px;height:16px;line-height:16px;padding:0pt 5px 0pt 0pt;text-align:right;width:95px;}
#progress #key div {float:left;font-size:10px;width:22%;}
#progress #center {text-align:center;}
#progress #right {text-align:right;width:23.9% !important;}
#progressBar #mercury .beyond {background:transparent url(sliderimages/beyond.gif) no-repeat scroll right top;font-size:11px;font-weight:bold;}
</style>
The Images
- The progress bar background
- The 'mercury' portion of the progress bar. The part that moves
- If the actual value is greater than the upper bound (goal), we want to do something other than blow out the right side of the progress bar
- Credits:
- Source code highlighting - SHJS - for the code highlighting you see here.
- Our CSS Guy - for all the spectacular CSS'ing.