It's rare that I post a sample written by someone else, but
occasionally someone beats me to the punch or writes code
that's good enough that I feel my re-writing it would just be
pointless. So without me rambling on any more...here are Tom's comments:
A true stacked bar chart with colors!
Again using that great original bar chart code with a little modification,
we can render a true stacked bar chart. We will use a different color for
each stack and each stack will have its own tool tip too !
Just pass an array with your colors, one for each bar.
The colors are specified by name, each color name has a corresponding spacer,
a gif image file that is dynamically plugged into the IMG tag SRC
attribute via our asp code. Make sure to place these files in your
/images folder. For expanded tool tip information, pass an array
with the additional text. Our example chart display five sensors (columns)
with four states of alarm. (stacks). The right-hand column (bar) will
represent the totals. The tool tip will first display the quantity
followed by a description of what this stack on the bar represents.
Note: You can embed the VbTab character to separate tool tip text into columns.
How the code works.
The stacked bars will be generated with HTML Styles.
Therefore your browser must support styles for the bar chart to display correctly.
For a good overview on positioning HTML elements see: Element Positioning
We will use a two (2) dimensional array to hold the actual data for the stacks of each bar.
Since a real application will probably be getting its data from a database,
I have included example code for this enclosed in comments.
Tom Kwasniewski
I removed the database sample code from the running version. It's available in
this zip file along with the multitude of colored spacers Tom included with the
script. Thanks Tom!
