ASP Bar Chart Class

Introduction This article explores an ASP class that allows the creation of bar charts. The charts are created using tables, cell colors and images and can be displayed in both Netscape and Internet Explorer.

Recently, a colleague and I were tasked with taking research reports to the web. The requester was not sure whether the reports would be better as an HTML newsletter, a web site or a PDF. Specifically, the question of whether or not the reports would be printed or viewed on the web could not be answered. What was clear is that there would be bar charts and there had to be a way to incorporate the bar charts into a number of formats.

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.

The Class

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.

<!--#INCLUDE FILE="clsChart.asp"-->

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.

This article was originally published on May 17, 2001
Page 1 of 1

Thanks for your registration, follow us on our social networks to keep up-to-date