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