Inside Technique : ASP Bar Charts
By Jason Borovoy

Back in February we posted an article on creating bar charts complete from HTML. Our server-script for generating the bar chart was fairly simple. To customize the bar chart, you needed to update the script. Jason Borovoy recently sent us an improved ASP script for generating custom bar charts. This script contains a single function that can be used to create any number of charts. Below we generate three sample bar charts using Jason's makeChart() function:

dim stuff
dim labelstuff
' Demo 1
stuff = Array(5,30)
labelstuff = Array("Canada", "US")
Response.Write makechart("Demo 1", stuff, labelstuff, null, "gold",10, 50,40,true)

Demo 1 5 30  Canada     US

' Demo 2
stuff = Array(254,119,11)
labelstuff = Array("Lots of Stuff", "More Stuff", "Little Stuff")
Response.Write makechart("Demo 2", stuff, labelstuff, null, "violet",5, 50, 20, true)

Demo 2 254 119 11   Lots of Stuff      More Stuff      Little Stuff

' Demo 3
stuff = Array(56,100,23.333,87,22,77,10)
labelstuff = array("label1","label2","label3","label4","label5","label6","label7")
Response.Write makechart("Demo 3",stuff,labelstuff,null, "cyan",0, 200,50,false)

Demo 3  label1   label2   label3   label4   label5   label6   label7

Using the MakeChart() Function

The complete VBScript makeChart() function is provided below. You must include this function in the header of your ASP file:

function makechart(title, numarray, labelarray, color, bgcolor, 
     bordersize, maxheight, maxwidth, addvalues) 
 'Function makechart version 3

 'Jason Borovoy
 'title: Chart Title
 'numarray: An array of values for the chart
 'labelarray: An array of labels coresponding to the values must me present
 'color If null uses different colors for bars if not null all bars color you specify
 'bgcolor Background color.
 'bordersize: border size or 0 for no border.
 'maxheight: maximum height for chart not including labels
 'maxwidth: width of each column
 'addvalues: true or false depending if you want the actual values shown on the chart
 'when you call the function use : response.write makechart(parameters)
 
 'actually returnstring would be a better name
 dim tablestring 
 'max value is maximum table value
 dim max 
 'maxlength maximum length of labels
 dim maxlength
 dim tempnumarray
 dim templabelarray
 dim heightarray
 Dim colorarray
 'value to multiplie chart values by to get relitive size 
 Dim multiplier
 'if data valid
 if maxheight > 0 and maxwidth > 0 and ubound(labelarray) = ubound(numarray) then
  'colorarray: color of each bars if more bars then colors loop through
  'if you don't like my choices change them, add them, delete them.
  colorarray = array("red","blue","yellow","navy","orange","purple","green")
  templabelarray = labelarray
  tempnumarray = numarray
  heightarray = array()
  max = 0
  maxlength = 0
  tablestring = "<TABLE bgcolor='" & bgcolor & "' border='" & bordersize & "'>" & _
    "<tr><td><TABLE border='0' cellspacing='1' cellpadding='0'>" & vbCrLf
  'get maximum value
  for each stuff in tempnumarray
   if stuff > max then max = stuff end if 
  next
  'calculate multiplier
  multiplier = maxheight/max
  'populate array
  for counter = 0 to ubound(tempnumarray)
   if tempnumarray(counter) = max then 
    redim preserve heightarray(counter)
    heightarray(counter) = maxheight
   else
    redim preserve heightarray(counter) 
    heightarray(counter) = tempnumarray(counter) * multiplier 
   end if 
  next 


   'set title 
   tablestring = tablestring & "<TR><TH colspan='" & ubound(tempnumarray)+1 & "'>" & _
     "<FONT FACE='Verdana, Arial, Helvetica' SIZE='1'><U>" & title & "</TH></TR>" & _
      vbCrLf & "<TR>" & vbCrLf
   'loop through values
   for counter = 0 to ubound(tempnumarray) 
    tablestring = tablestring & vbTab & "<TD valign='bottom' align='center' >" & _
    "<FONT FACE='Verdana, Arial, Helvetica' SIZE='1'>" & _
    "<table border='0' cellpadding='0' width='" & maxwidth & "'><tr>" & _
    "<tr><td valign='bottom' bgcolor='" 
    if not isNUll(color) then 
     'if color present use that color for bars
     tablestring = tablestring & color
    else
     'if not loop through colorarray
     tablestring = tablestring & colorarray(counter mod (ubound(colorarray)+1))
    end if
    tablestring = tablestring & "' height='" & _
     round(heightarray(counter),2) & "'><img src='chart.gif' width='1' height='1'>" & _
     "</td></tr></table>"
    if addvalues then
     'print actual values
     tablestring = tablestring & "<BR>" & tempnumarray(counter)
    end if 
    tablestring = tablestring & "</TD>" & vbCrLf
   next
 
  tablestring = tablestring & "</TR>" & vbCrLf
  'calculate max lenght of labels
  for each stuff in labelarray
   if len(stuff) >= maxlength then maxlength = len(stuff)
  next
  'print labels and set each to maxlength
  for each stuff in labelarray
   tablestring = tablestring & vbTab & "<TD align='center'><" & _
    "FONT FACE='Verdana, Arial, Helvetica' SIZE='1'><B> " 
   for count = 0 to round((maxlength - len(stuff))/2)
    tablestring = tablestring & " "
   next
   if maxlength mod 2 <> 0 then tablestring = tablestring & " "
   tablestring = tablestring & stuff 
   for count = 0 to round((maxlength - len(stuff))/2)
    tablestring = tablestring & " "
   next
   tablestring = tablestring & " </TD>" & vbCrLf
  next
   
  tablestring = tablestring & "</TABLE></td></tr></table>" & vbCrLf
  makechart = tablestring
 else
  Response.Write "Error Function Makechart: maxwidth and maxlength have to be greater " & _
  " then 0 or number of labels not equal to number of values"
 end if 
end function

The makeChart() function builds the chart from 9 parameters that are used to generate the chart:

1. title (The title of your chart)
2. numarray (Your array of values)
3. labelarray (Your array of labels)
4. color (If you want all your bars to be same color, put it here (i.e. "blue" or "#0000FF"). If you want the colors to be rotated use the keyword null.)
5. bgcolor (The background color (i.e. "black" or "#000000")
6. bordersize (The size of the border around the chart. (use 0 for no border))
7. maxheight (The max height of the bars )
8. maxwidth (The max width of the bars )
9. addvalues (If you want the chart to show the actual values, put true, if not, put null)

For Example:

Dim stuff
Dim labelstuff
stuff = Array(56,100,23.333,87,22,77,10)
labelstuff = 
   array("label1","label2","label3","label4","label5","label6","label7")
Response.Write makechart("Stuff", stuff, labelstuff, null, "cyan", 0, 200,
  50, false)

That's it! We'd like to thank Jason for providing us with this enhanced bar chart script. To learn more about creating bar charts from HTML we recommend you see our original HTML Bar Chart article.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.