Creating a Stack Bar Chart Using ASP--tutorial.jcwcn.com

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

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:

<TABLE>
<TR>
     <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>
</TR>
</TABLE>

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

discuss this topic to forum