By Michael Balloni

This handy VBScript class comes from Michael Balloni, who has authored a number of other articles on 4Guys (view Michael's 4Guys articles). This tip contains a VBScript class Michael sent in that creates a horizontal percentage bar gauge. (For information on what, exactly, classes are and how to use/create them in VBScript, be sure to read: Using Classes within VBScript!) 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%

Michael uses this class on the site he works on, Streamload.com, to display various percentage information to his users.

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, 1_pix_trans.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 (or you can download the code in text format). There is also a live demo to try out.

Happy Programming!

Return to user tips...

<% ' 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=/demos/Images/" & _ "1_pix_trans.gif></td>" end if if bg_width > 0 then RenderHtml = RenderHtml _ & "<td width=" & bg_width & " height=" & _ Height & " bgcolor=" & BgColor & _ "><img src=/demos/Images/" & _ "1_pix_trans.gif></td>" end if RenderHtml = RenderHtml _ & "</tr>" _ & "</table>" end function end class %>

Return to user tips...