Web Database Concept
     How We Work Together
     Web Database Sample
     Classic ASP Design Tips
     Bar Chart Tool
     Web Design Resources
     Access Database Sample

Bar Chart Tool

Free Classic ASP Bar Chart Tool

Designed by J. Paul Schmidt, MBA
No warranties are either expressed or implied.
Not responsible for any problems.

Here is an example using the data below:

Unit Sales
1/1/2003 - 4/30/2003
1/31 2/28 3/31 4/30
  St. Louis
  Kansas City
  St. Joseph
Latest preliminary figures

Chart Data Area Height
Chart Data Area Width
Chart Align on Page
Title Line 1
Title Line 1
Y-Axis Label
Data Number Prefix
Data Number Use Comma Separator?
Data Number Decimal Places
Footer Line 1
Footer Line 2
X-Axis Data Labels Data Col. 1 Data Col. 2 Data Col. 3
Legend Series Labels:

This ASP bar chart tool has the following features:
o Built as a pure ASP class so there are no components to register and code is still hidden behind the scenes.
o If one puts the cursor over a bar, in most browsers its value is shown as a tooltip.
o Tooltip and y-axis values can be rounded and formatted to look like $1,234 instead of 1234.12.
o The Y-axis min and max can be set or calced from the data and the min can even be negative.
o Chart data area size can be set.
o Text size and style can be set (although this feature is not shown in the example above).
o The chart can be aligned on the page left, center, or right.
o If y-axis min and max are calced from data, they are set to round numbers such as 950 instead of 947.
o Title and footers can be shown with multiple lines of text.
o Bar colors can be set otherwise default colors are used.
o The Legend can be shown or not shown.
o X-axis data or series labels can be shown or not (but these can make the graph wider).
o The only required setting is the 2-dimensional data array itself.

And here is an example of ASP code used to include files, dim variables, load arrays (although the data array is the only one that is required), and call the class to build the chart:

Option Explicit
Response.Expires = -1000 ' Make browser not cache pg.
Response.Buffer = True ' Buffer content.
<!--#include file="jpsutilityabbr.asp"-->
<!--#include file="jpschart.asp"-->
<title>Bar Chart Short Example</title>
' Dim var.
Dim objjpsvbChart
Dim aChartXAxisDataLabel(3) ' Max row num - 1, note arrays start at 0.
Dim aChartData(2, 3) ' Max fld num - 1, max row num minus 1, note arrays start at 0.
Dim aChartLegendSeriesLabel(2) ' Max fld num - 1, note arrays start at 0.

' Fill aChartXAxisDataLabel.
' (If you use these, try to keep them short as they can add width.)
aChartXAxisDataLabel(0) = "1/31"
aChartXAxisDataLabel(1) = "2/28"
aChartXAxisDataLabel(2) = "3/31"
aChartXAxisDataLabel(3) = "4/30"

' Fill aChartData.
' (Row 1.)
aChartData(0, 0) = 5123.23
aChartData(1, 0) = 3906.54
aChartData(2, 0) = 3578.97
' (Row 2.)
aChartData(0, 1) = 5582.23
aChartData(1, 1) = 4679.10
aChartData(2, 1) = 3035.00
' (Row 3.)
aChartData(0, 2) = 7027.02
aChartData(1, 2) = 5756.55
aChartData(2, 2) = 3921.45
' (Row 4.)
aChartData(0, 3) = 6652.78
aChartData(1, 3) = 6756.43
aChartData(2, 3) = 4034.76

' Fill aChartLegendSeriesLabel.
aChartLegendSeriesLabel(0) = "St. Louis"
aChartLegendSeriesLabel(1) = "Kansas City"
aChartLegendSeriesLabel(2) = "St. Joseph"

' Create, use, destroy chart object.
' (To print, set browser to print background colors.)
Set objjpsvbChart = New jpsvbChart
objjpsvbChart.ChartDataAreaHeight = 200 ' Optional.
objjpsvbChart.ChartDataAreaWidth = 400 ' Optional.
objjpsvbChart.ChartAlignOnPage = "center" ' Optional.
objjpsvbChart.TitleLine1 = "Unit Sales" ' Optional.
objjpsvbChart.TitleLine2 = "1/1/2003 - 4/30/2003" ' Optional.
objjpsvbChart.YAxisLabel = "Sales" ' Optional.
objjpsvbChart.XAxisDataLabelArray = aChartXAxisDataLabel ' Optional.
objjpsvbChart.DataArray = aChartData
objjpsvbChart.DataNumberPrefix = "$" ' Optional.
objjpsvbChart.DataNumberUseCommaSeparator = True ' Optional.
objjpsvbChart.DataNumberDecimalPlaces = 0 ' Optional.
objjpsvbChart.LegendSeriesLabelArray = aChartLegendSeriesLabel ' Optional.
objjpsvbChart.FooterLine1 = "Month" ' Optional.
objjpsvbChart.FooterLine2 = "Latest preliminary figures" ' Optional.
Call objjpsvbChart.Execute()
Set objjpsvbChart = Nothing

And the trick for using the chart with a recordset is the same concept as writing data to an HTML table from a recordset and that is this - within your loop through the recordset you retrieve values such as objRS("Sales") and in this case write those values to the chart object instead of writing those values to the HTML table:

' Fill aChartData.
' (For each row in a recordset loop.)
aChartData(0, intRowNum) = objRS("Unit1Sales")
aChartData(1, intRowNum) = objRS("Unit2Sales")
aChartData(2, intRowNum) = objRS("Unit3Sales")

And if a user ever wants to print a bar chart he can do this in a browser such as Internet Explorer: Tools | Internet Options | Advanced tab | Under Printing check "Print background colors and images."

To Use Paul's Services:

Let's put some data on the Web!
Copyright © 2000-2018
J. Paul Schmidt, MBA
Freelance Web and Database Developer
All Rights Reserved

Privacy Policy