Top ASP 101 Stories The Top 10 ASP Links @ Microsoft.com What is Adovbs.inc and Why Do I Need It? An Overview of ASP.NET QUICK TIP: Recompiling components without rebooting Show All Tips >>  ASP 101 Updates

Creating a Stack Bar Chart Using ASP

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  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 asp101.com 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:

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.

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