Library code snippets
A Horizontal Percentage Gauge
A Horizontal Percentage Gauge Class
This tip contains a VBScript class Michael sent in that creates a horizontal percentage bar gauge. For example, if you ran a testing site that quizzed users on some topic, you may wish to show the user their test scores graphically, like so:
You score an 87% on the test. Congratulations!
| 0 |
|
100% |
With this class, creating such horizontal percentage gauges is a breeze - just instantiate the class, set a few properties, and call a method to generate the gauge. In fact, the above example uses the following simple, straightforward code (for brevity the actual class is not included in this sample code):
<%
Dim sl_gauge
Set sl_gauge = new Slgauge
sl_gauge.BgColor = "#FFFFFF"
sl_gauge.FgColor = "#990000"
sl_gauge.Width = 78
sl_gauge.Height = 5
sl_gauge.MinVal = 0
sl_gauge.MaxVal = 100
sl_gauge.CurVal = iTestScore '87% in our example
%>
<!-- Display the gauge -->
<table cellpadding=0 cellspacing=2>
<tr>
<td>0</td>
<td><% = sl_gauge.RenderHtml %></td>
<td>100%</td>
</tr>
</table>
|
That's it! Note that to use this you will have to have a small (43 bytes),
transparent GIF file on your Web server that is used to help properly space out
the HTML table that is used to display the gauge. This image, shim.gif,
can be downloaded here (right click on the
link and choose save-as; since the GIF is transparent, if you click on the link
you will be shown the GIF, but you will not see it (due to its transparency)).
Below you will find the complete source code to the class. Feel free to cut and paste the code into your application.
Happy Programming!
<%
' Handy class for displaying a horizontal percentage gauge.
class Slgauge
' Colors.
public BgColor
public FgColor
' Dimensions.
public Width
public Height
' Values.
public MinVal
public MaxVal
public CurVal
' Render this into HTML as a table.
function RenderHtml
' Normalize the properties.
if MinVal > MaxVal then
Dim temp_val
temp_val = MinVal
MinVal = MaxVal
MaxVal = temp_val
end if
if CurVal < MinVal then
CurVal = MinVal
elseif CurVal > MaxVal then
CurVal = MaxVal
end if
' Figure out the percentage that the CurVal is
' within MinVal and MaxVal.
Dim percentage_val
percentage_val = (CurVal - MinVal) / (MaxVal - MinVal)
' Compute the first and second widths.
Dim fg_width
fg_width = Round(Width * percentage_val)
Dim bg_width
bg_width = Width - fg_width
RenderHtml = "<table cellspacing=0 cellpadding=0 width=" & _
Width & " height=" & Height & ">" _
& "<tr>"
if fg_width > 0 then
RenderHtml = RenderHtml _
& "<td width=" & fg_width & " height=" & _
Height & " bgcolor=" & FgColor & _
"><img src=""/images/shim.gif""></td>"
end if
if bg_width > 0 then
RenderHtml = RenderHtml _
& "<td width=" & bg_width & " height=" & _
Height & " bgcolor=" & BgColor & _
"><img src=""/images/shim.gif""></td>"
end if
RenderHtml = RenderHtml _
& "</tr>" _
& "</table>"
end function
end class
%>
|
Related articles
Related discussion
-
Header and Footer in Web page print
by fhajaj (4 replies)
-
help me to get simple requirement
by Slicksim (1 replies)
-
Gridview -> Template Field -> Button
by antti.simonen (1 replies)
-
Classic ASP : Page expires
by chezhian_in05 (0 replies)
-
ASP VS PHP
by paulfp (9 replies)
Related podcasts
-
ASP.NET Caching and Performance
Steve Smith, owner of ASP Alliance and Lake Quincy Media joins us today to teach us about some hidden gems in ASP.NET caching and performance. Steve’s expertise in this area comes from first-hand experience as Lake Quincy’s ad system serves over 60 requests per second and handles over 150 million...
Related jobs
-
Microsoft .Net Architect
in AMSTERDAM (€50K-€90K per annum) -
Microsoft Dynamics CRM Technical Consultant
in Netherlands (€50K-€90K per annum) -
Technical Support Engineer EMEA
in Reading (£50K-£50K per annum) -
Solutions Engineer
in Reading (£50K-£60K per annum)
Have you had any problems printing this bar? It comes up transperent on a printed page.
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<title>horizontal gauge test</title>
</head>
<body>
<?php
class myGauge {
// Color
var $BgColor = "#FFFFFF", $FgColor = "#990000";
// Dimensions.
var $Width = 125, $Height = 10;
// Values.
var $MinVal = 0, $MaxVal = 100, $CurVal = 77;
// Set values
function setValues($fgc, $bgc, $wid, $hei, $min, $max, $cur) {
$this->BgColor = $fgc;
$this->FgColor = $bgc;
$this->Width = $wid;
$this->Height = $hei;
$this->MinVal = $min;
$this->MaxVal = $max;
$this->CurVal = $cur;
}
// Render this into HTML as a table.
function display() {
// Normalize the properties.
if ($this->MinVal > $this->MaxVal) {
$tempval = $this->MinVal;
$this->MinVal = $this->MaxVal;
$this->MaxVal = $tempval;
}
if ($this->CurVal < $this->MinVal) {
$this->CurVal = $this->MinVal;
}
elseif ($this->CurVal > $this->MaxVal) {
$this->CurVal = $this->MaxVal;
}
// Figure out the percentage that the CurVal is within MinVal and MaxVal.
$percentage_val = ($this->CurVal - $this->MinVal) / ($this->MaxVal - $this->MinVal);
// Compute the first and second widths.
$fgwidth = Round($this->Width * $percentageval);
$bgwidth = $this->Width - $fgwidth;
$RenderHtml = "<table cellspacing=0 cellpadding=0 width=" . $this->Width . " height=" . $this->Height . "><tr>";
if ($fgwidth > 0) {
$RenderHtml = $RenderHtml . "<td width=" . $fgwidth . " height=" . $this->Height . " bgcolor=" . $this->FgColor .
"><img src=\"/images/shim.gif\"></td>";
}
if ($bgwidth > 0) {
$RenderHtml = $RenderHtml . "<td width=" . $bgwidth . " height=" .
$this->Height . " bgcolor=" . $this->BgColor . "><img src=\"/images/shim.gif\"></td>";
}
$RenderHtml = $RenderHtml . "</tr></table>";
print $RenderHtml;
}
}
// Main
$oGauge = new myGauge();
/*
// Use method setValues to set datamembers, like:
$fc = "#FFFFFF";
$bc = "#990000";
$wi = 125;
$hi = 10;
$mi = 0;
$ma = 100;
$cu = 87;
$oGauge->setValues($fc, $bc, $wi, $hi, $mi, $ma, $cu);
*/
?>
<!-- Display the gauge -->
<table cellpadding=0 cellspacing=2>
<tr>
<td><?php $oGauge->display(); ?></td>
</tr>
</table>
</body>
</html>
This thread is for discussions of A Horizontal Percentage Gauge.