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!


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, 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

You might also like...


Michael Balloni


Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

“Some people, when confronted with a problem, think "I know, I’ll use regular expressions." Now they have two problems.” - Jamie Zawinski