ASP 101 - Active Server Pages 101 - Web01
The Place ASP Developers Go!

Please visit our partners

Windows Technology Windows Technology
15 Seconds
ASP 101
ASP Wire
VB Forums
VB Wire
internet.commerce internet.commerce
Partners & Affiliates

ASP 101 is an site
ASP 101 is an site
Internet News
Small Business
Personal Technology

Corporate Info
Tech Jobs
E-mail Offers

ASP 101 News Flash ASP 101 News Flash

 Top ASP 101 Stories Top ASP 101 Stories
Getting Scripts to Run on a Schedule
The Top 10 ASP Links @
What is and Why Do I Need It?

Use Option Strict
Show All Tips >>
ASP 101 RSS Feed ASP 101 Updates

Creating a Stack Bar Chart Using ASP

by Douglas R. Hall & Lakshmi N. Viswanathan

This article with the attached files demonstrates building a stack bar chart using ASP without components.

Chart Title

Y Label    
Row Label 1 
Row Label 2 
Row Label 3 
Row Label 4 
Row Label 5 
Row Label 6 
Row Label 7 
Row Label 8 
Row Label 9 
Row Label 10 
Column Label 1: 410.00 Column Label 2: 141.00 Column Label 3: 56.00
Column Label 1: 141.00 Column Label 2: 177.00 Column Label 3: 142.00 Column Label 6: 44.00
Column Label 1: 142.00 Column Label 2: 177.00 Column Label 3: 44.00 Column Label 6: 1,670.00
Column Label 1: 141.00 Column Label 2: 160.00 Column Label 3: 44.00 Column Label 4: 529.00
Column Label 1: 56.00 Column Label 2: 142.00 Column Label 3: 163.00
Column Label 1: 80.00 Column Label 2: 207.00 Column Label 3: 308.00 Column Label 5: 410.00
Column Label 1: 119.00 Column Label 2: 1,670.00 Column Label 3: 44.00
Column Label 1: 64.00 Column Label 2: 308.00 Column Label 3: 163.00 Column Label 6: 95.00
Column Label 1: 529.00 Column Label 2: 44.00 Column Label 3: 95.00 Column Label 5: 410.00 Column Label 6: 163.00
Column Label 1: 410.00 Column Label 2: 1,670.00 Column Label 3: 163.00 Column Label 4: 20.00
0 2,263.00
X Label

 Legend - X Label
   Column Label 1
   Column Label 2
   Column Label 3
   Column Label 4
   Column Label 5
   Column Label 6

View ASP Code | Download Working Sample

The bar chart sample in served as the basis for building this stack bar chart. A strong feature of the sample is the ability to read the values of the bars through the tool tip text. Each bar is an image inside a table data (<TD>) HTML tag, that is sized to reflect its value.


Sample Bar - See tool tip by moving the cursor over the bar.

A stack bar is a visual display of a series of numeric values. This is achieved through a TABLE in HTML. The table data cell (<TD>) in HTML is sized and colored to represent the value and category respectively. A series of such cells form a stack bar and later the chart.

For example, if we had a row of values 20, 40, 90, 50 and 80. They could be displayed as a stack bar in HTML as:

     <TD HEIGHT="15" WIDTH="20"><IMG SRC="images/stack0.gif" HEIGHT="15" WIDTH="20"></TD>
     <TD HEIGHT="15" WIDTH="40"><IMG SRC="images/stack1.gif" HEIGHT="15" WIDTH="40"></TD>
     <TD HEIGHT="15" WIDTH="90"><IMG SRC="images/stack2.gif" HEIGHT="15" WIDTH="90"></TD>
     <TD HEIGHT="15" WIDTH="50"><IMG SRC="images/stack3.gif" HEIGHT="15" WIDTH="50"></TD>
     <TD HEIGHT="15" WIDTH="80"><IMG SRC="images/stack4.gif" HEIGHT="15" WIDTH="80"></TD>
20 40 90 50 80

Sample Stack Bar

Please note that the above code sample is a simplified version for easy understanding. To see the actual code that works in the real world, view the source code.

The horizontal stack bar design is deliberately chosen rather than a vertical stack bar to display long row labels. The tool tip text showing the values of the bars is achieved by setting the ALT attribute of the IMG tag. Netscape 6.x does not support the ALT attribute for images and so I had to come up with this fix.

<A TITLE="tool tip text"><IMG SRC="images/stack0.gif" HEIGHT="10" WIDTH="2" ALT="tool tip text"></A>

Embedding the image in an anchor <A> tag with the TITLE attribute set to display the tool tip text allows for Netscape support. The HREF attribute in anchor tag is deliberately omitted to shun hyper linking. This works well with IE 5.x that support both ALT and TITLE attributes and Netscape 4.x that supports only ALT attribute.

Happy Programming!

Displaying a large stack bar chart through paging:

This is a cross table with 150 rows and 10 columns transformed to a stack bar chart. The data is read from a text file - data2.txt and made to a stack bar chart using asp - StackBar2.asp. The paging design was practised to fix the IE 5.0 bug that disallowed displaying a large stack bar chart in one page. Testing showed blips occurring in the stack bars when rows exceeded 25. I recommend a page with stack bars not more than 15 rows.

Download Working Sample

Home |  News |  Samples |  Articles |  Lessons |  Resources |  Forum |  Links |  Search |  Feedback
The Network for Technology Professionals



Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers