Visual Basic
Web Scripting
Java
Click Here


Home

What's New

Articles

Code Downloads

Code Snippets

Message boards

Links
Tool Box

Books

Mailing List
Receive free code snippets and notices when this site is updated.

Contact

Creating Bar Charts in ASP

Ever wanted to add graphing capabilities to your web applications but don't have one of those fancy graph components.

Well here's a very simple solution to the problem that will let you add bar charts to your ASP pages using only standard ASP, HTML and some images.  All that needs to be done is to scale some images by a given a mount (Example 1) or to include a picture number of times (Example 2).

Web Site Visitors this Year
January WB01643_.gif (3601 bytes)
February WB01643_.gif (3601 bytes)
March WB01643_.gif (3601 bytes)

Example 1 - Histogram made by scaling images.

Web Site Visitors this Year

Januarylizard.gif (1248 bytes)lizard.gif (1248 bytes)lizard.gif (1248 bytes)lizard.gif (1248 bytes)

Februarylizard.gif (1248 bytes)lizard.gif (1248 bytes)lizard.gif (1248 bytes)lizard.gif (1248 bytes)

Marchlizard.gif (1248 bytes)lizard.gif (1248 bytes)lizard.gif (1248 bytes)lizard.gif (1248 bytes)lizard.gif (1248 bytes)

Key
lizard.gif (1248 bytes)
Thousands

Example 2 - Picture graph made by including an image a number of times.

Histogram

I'll start by giving you the code for a simple graphing sub I created.

<%
Sub DrawHistogram(ImageFile, Height, Bars(), MultiplyBy)
Dim TotalOfBars
Dim BarCount

BarCount = UBound(Bars,1)-1

For i=0 to BarCount
  TotalOfBars = TotalOfBars + Bars(i,1) ' The bars value
Next
For i=0 to BarCount
  Response.write "<TR><TD>" & Bars(i,0) & "</TD><TD>"

  if MultiplyBy = 0 then ' If a MultiplyBy of 0 is passed scale image as a percentage
    Response.write "<IMG Src='" & ImageFile & "' Height='" & Height & "' Width='" & CInt((Bars(i,1)/TotalOfBars)*100) & "%'>"
  else ' Other wise mulitply the width by MultiplyBy
    Response.write "<IMG Src='" & ImageFile & "' Height='" & Height & "' Width='" & CInt((Bars(i,1)/TotalOfBars)*100) * MultiplyBy & "'>"
  end if
  Response.write "</TD></TR>"
Next
End Sub
%>

The DrawHistogram sub takes the URL of an image, it's height, an array that holds the bars in the chart and their captions and values, and the amount to multiply the bar width by.  If MultiplyBy is set 0 the image is scaled to a percentage of the table width.

Here is an example of using this sub routine to create the chart in example 1.

<HTML>
<BODY>
<H1>Web Site Visitors this year</H1>
<TABLE border=0>
<%
Dim myBar(2,1)
myBar(0,0) = "January"
myBar(0,1) = 4
myBar(1,0) = "February"
myBar(1,1) = 4
myBar(2,0) = "March"
myBar(2,1) = 7
DrawHistogram "bar.gif", 15, myBar, 10
%>
</TABLE>

</BODY>
</HTML>

This example could be modified to get its data from a database.

Picture graph

Here is the sub routine to create a picture graph this one works a bit different in that it will display the actual number of pictures for each bar and not a percentage of the total.

<%
Sub DrawPicGraph(ImageFile, Bars())
For i=0 to UBound(Bars,1)-1
  Response.write "<TR><TD>" & Bars(i,0) & "</TD><TD>"
  For j=1 to Bars(i,1)
   Response.write "<IMG Src='" & ImageFile & "'>"
  next
  Response.write "</TD></TR>"
Next
End Sub
%>

And here's an example of using it.

<HTML>
<BODY>
<H1>Web Site Visitors this year</H1>
<TABLE border=0>
<%
Dim myBar(2,1)
myBar(0,0) = "January"
myBar(0,1) = 4
myBar(1,0) = "February"
myBar(1,1) = 4
myBar(2,0) = "March"
myBar(2,1) = 7
DrawPicGraph "lizard.gif", myBar
%>
</TABLE>

</BODY>
</HTML>

Tell a friend about this article