To read the article online, visit

An HTML Bar Chart Class

By Anton Bawab

Looking for a component or a trick to build fairly simple bar charts, I found a function on provided by Jason Borovoy. While Jason's function could have done my job, I decided to make my own. Jason's functions created the graphs vertically, mine does them horizontally.

There are a couple of other differences between Jason's function and this one. First of all, this is not a function. I wrapped the whole thing in a CLASS. This gives me the ability to interact with it just like it was a COM object (well almost!). Setting properties and Executing Methods. This is my first at writing Classes, so if anybody out there has any tricks or hints, please let me know. To learn more about writing classes, be sure to read Using Classes with VBScript. (Note: You must have VBScript Scripting Engine Version 5.0 or greater to use classes in VBScript. You can download a free copy of the latest version here.)

Writing the function in a CLASS allowed me to perform some validation on the values of the properties passed to it, and return error messages to the user that (hopefully) made sense. It made it a lot easier to make some properties optional and provide default values for them, as well as giving it a couple of Read Only properties. For the time being the class only give the Maximum Value, Minimum Value and the Sum of all values passed to it.

Here's how to use the Class (download the source code in text format):

  • View a demo of the HTML Bar Chart

    • Include the file in your ASP script

      <!--#INCLUDE FILE=""-->

    • Instantiate the class as in

      Set objChart as NEW BarChart

    • Now pass the parameters needed to the Object you just created. The names of the properties are self explanatory. (For more information on how to use the With block as shown in the code snippet below, be sure to read Using the With Block.)

      With objChart
          .chartBGcolor = "#FFCC00"
          .chartTitle = "My First Chart"
          .chartWidth = "160"
          'the array holding the values to plot
          .chartValueArray = array(20,60,30,18)
          'the array holding the labels for the values
          .chartLabelsArray = array("Yes", "No", "Maybe", "Dunno")
          .chartColorArray = array("#FF9966" , "#009900" , "#000099")
          .chartViewDataType = "V"
          .chartBarHeight = 10
          .chartTextColor = "#990000"
      END WITH

    • Use the only Method of the Class to get the graph


    The class gives you control over almost everything plotted on the screen. Changes to the formatting of the text have to be hard coded for the time being. The next revision will give the possibility of specifying the font and font sizes.

    Here is a brief description of the properties the class takes

    chartBGcolor Hexadecimal value, the background of the chart area, optional, default is white.
    chartTitle String, the title of the chart, replaced with 'Chart Title' if not provided.
    chartWidth Integer, specifies the width of the area the chart is to be drawn in
    chartValueArray Array, holds the values for the chart to plot
    chartLabelsArray Array, holds the labels of the values The number of elements should be the same as that passed for the chartValueArray
    chartColorArray Array, holds the colors to use for the bars. Replaced with a default set of colors if not provided. The number of colors provided does not have to be the same as that of the elements. The colors will cycle and repeat themselves.
    chartViewDataType String, specifies whether you want to show the values next to the labels or not. Defaults to "V". Accepts one of three values:
      N : Show NO values
      V : Show the values as they are
      P : Show the values as a percentage of the total
    chartBarHeight Integer, specifies the desired height of the bar, defaults to 15
    chartBorder Integer, specifies the width of the border to draw around the plotting area, defaults to 0
    chartTextColor Hexadecimal value, specifies the color to use for the title and the labels
    chartMaxValue Read only, returns the Maximum value of the chartValueArray
    chartMinValue Read only, returns the Minimum value of the chartValueArray
    chartTotalValues Read only, returns the total of all values in the chartValueArray
    Draw Method, used to render the graph to the screen

    Happy Programming!

    Note: You may notice that the HTML generated to create the bar chart references an image named chart.gif. chart.gif is a fictitous image, just to get the height of the cells right...


  • download the source code to in text format
  • View a demo of the HTML Bar Chart

  • Article Information
    Article Title: An HTML Bar Chart Class!
    Article Author: Anton Bawab
    Published Date: Wednesday, April 05, 2000
    Article URL:

    Copyright 2017 QuinStreet Inc. All Rights Reserved.
    Legal Notices, Licensing, Permissions, Privacy Policy.
    Advertise | Newsletters | E-mail Offers