An HTML Bar Chart ClassBy Anton Bawab
Looking for a component or a trick to build fairly simple bar charts, I found a function on InsideDHTML.com 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.
- Include the BarChartClass.inc file in your ASP script
- 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
Withblock as shown in the code snippet below, be sure to read Using the
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
Here is a brief description of the properties the class takes
|Hexadecimal value, the background of the chart area, optional, default is white.|
|String, the title of the chart, replaced with 'Chart Title' if not provided.|
|Integer, specifies the width of the area the chart is to be drawn in|
|Array, holds the values for the chart to plot|
Array, holds the labels of the values
The number of elements should be the same as that passed for the |
|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.|
String, specifies whether you want to show the values next to the labels or not.
Defaults to "V".
Accepts one of three values:|
V : Show the values as they are
P : Show the values as a percentage of the total
|Integer, specifies the desired height of the bar, defaults to 15|
|Integer, specifies the width of the border to draw around the plotting area, defaults to 0|
|Hexadecimal value, specifies the color to use for the title and the labels|
Read only, returns the Maximum value of the |
Read only, returns the Minimum value of the |
Read only, returns the total of all values in the |
|Method, used to render the graph to the screen|
Note: You may notice that the HTML generated to create the bar chart references an image named
chart.gif is a fictitous image, just to get the height of the
clsBarChart.incin text format