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