When you think ASP, think...
Recent Articles xml
All Articles
ASP.NET Articles
Related Web Technologies
User Tips!
Coding Tips
spgif spgif

Sample Chapters
JavaScript Tutorials
MSDN Communities Hub
Official Docs
Stump the SQL Guru!
XML Info
Author an Article
spgif spgif
ASP ASP.NET ASP FAQs Feedback topnav-right
Print this page.
User Tips: A Horizontal Percentage Gauge Class

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!

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>
     <td><% = sl_gauge.RenderHtml %></td>

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/" & _
      end if
      if bg_width > 0 then
          RenderHtml = RenderHtml _
                          & "<td width=" & bg_width & " height=" & _
                          Height & " bgcolor=" & BgColor & _
                          "><img src=/demos/Images/" & _
      end if
      RenderHtml = RenderHtml _
                      & "</tr>" _
                      & "</table>"
  end function
end class
Return to user tips...

ASP.NET [1.x] [2.0] | ASPFAQs.com | Advertise | Feedback | Author an Article