ASP Bar Chart Class

After playing around with some graphical methods nothing seemed flexible enough. Searching on the web eventually yielded a number of methods for creating bar charts using HTML tables. The methods were not always elegant but seemed to serve a purpose. Using these methods a horizontal bar chart could be added to our web page. Excitement soon waned as the bar charts would print in only Internet Explorer and not Netscape. Our web site log files seem to indicate that while IE may be the dominate browser the site has to support Netscape.

Eventually, we took the function provided by Jason Borovoy at InsideDHTML.com and modified it to create charts that print in both IE and Netscape. As I was looking for an ASP class that could do the job more efficiently I found an article on www.4guysfromrolla.com by Anton Bawab (http://www.4guysfromrolla.com/webtech/040500-1.shtml) which took Jason's function and made it part of a class. The chart did not print correctly in Netscape and IE until after the class was edited (or hacked). Although some properties were removed because they would not be needed for this project we had a method for creating the bar charts.

In the first meeting we were presented not with a horizontal bar chart but a vertical bar chart and instead of single bars there were multiple categories on the chart. After the initial shock the task at hand seemed clear. Add a few properties so the orientation of the chart and the number of bars could be expanded. This is presented here as a class with the examples of the charts that can be created. With an apology to Anton as his ASP class was more elegant than the one presented here; let's take a look at the class and the charts created with it. The files needed to make the charts and a sample template can be downloaded.

There are 4 types of charts that can be created using this class horizontal, vertical, multihorizontal, and multivertical. The template.asp page provided in the download displays the minimum amount of information needed to create each of the charts.

The code below is taken from the template. The first piece necessary to use the class in an ASP page is to include the file containing the class. This is done using the include file tag as shown below.

The next lines on the webpage set up the title, header, and body information. There is a style sheet used to control the look of the chart. Because tables are used to display the chart the style sheet allows manipulation of the table cells without have to change the class. The style sheet class used to manipulate the fonts is the footer class. In the download file the style sheet is listed as default.css.

The line immediately following this code allow you to build the charts. The first two lines create the bar chart object. In line comments should allow one to figure out what each property does. There is a property to select the chart type, title, data and in the case of multiple bar charts there is a second data array. For charts with two sets of data the chartGroupName1 and chartGroupName2 properties are the names representing the data (i.e. the legend) The chartViewDataType property allows percent signs or dollar signs to be added to the data.

Dim objChart
Set objChart = New BarChart

Response.Write("Horizontal Chart 
")

'Enter data for Horizontal Chart
With objChart
	'Chart Types:  horizontal, vertical, multihorizontal, multivertical
	.chartType = "horizontal"

	'Data Types: V is value/numeric; P is percentage; D is dollar
	.chartViewDataType = "P"

	'Title of Chart
	.chartTitle = "Where teens shop most often for activewear and athletic apparel"

	'Data Values:  Enclose in " " if you need to include a comma in the number
	.chartValueArray = Array(38,14,14,12,7,3,2)

	'Data Values (Second Set):  This is used only for multi charts type an apostrophe
	'before line to hide if not using
	'Must have same number of values as first set
	'.chartValueArray2 = Array()

	'Data Labels:  Must have same number of values as data
	.chartLabelsArray = Array("Department Stores","Specialty Stores","Full-line
	Sporting Good Stores","Discount Stores","Athletic Footwear Stores","Catalogs",
	"Online Sites")

	'Groups:  This is used only for multi charts type an apostrophe '
	'before line to hide if not using
	'.chartGroupName1 = ""
	'.chartGroupName2 = ""
END WITH

objChart.Draw
	

This paper explores an ASP class that allows the creation of bar charts. The charts are created using tables, cell colors and images. The tables have been manipulated to allow the charts to be displayed using different orientations. All of the charts print in both Netscape and Internet Explorer.