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

Please visit our partners


Windows Technology Windows Technology
15 Seconds
4GuysFromRolla.com
ASP 101
ASP Wire
VB Forums
VB Wire
WinDrivers.com
internet.commerce internet.commerce
Partners & Affiliates














ASP 101 is an
internet.com site
ASP 101 is an internet.com site
IT
Developer
Internet News
Small Business
Personal Technology

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers

ASP 101 News Flash ASP 101 News Flash





ASP Source Code:
<%
' Tom Kwasniewski can be reached at: tkwasnie@dreamscape.com
Sub ShowStackedBarChart(ByRef aValues, ByRef aLabels, ByRef strTitle, _
	ByRef strXAxisLabel, ByRef strYAxisLabel, ByRef aColors, ByRef aToolTip, ByRef aBars)
	' Some user changable graph defining constants
	' All units are in screen pixels
	Const GRAPH_WIDTH  = 400  ' The width of the body of the graph
	Const GRAPH_HEIGHT = 300  ' The heigth of the body of the graph
	Const GRAPH_BORDER = 4    ' The size of the black border
	Const GRAPH_SPACER = 2    ' The size of the space between the bars
	Const TABLE_BORDER = 0
	'Const TABLE_BORDER = 10
	' Declare our variables
	Dim i, ii, iTmp, aTmp()
	Dim iMaxValue
	Dim iBarWidth
	Dim iBarHeight
	Dim strColumnColor
	' Get the maximum value in the data set
	iMaxValue = 0
	For I = 0 To UBound(aValues)
		If iMaxValue < aValues(I) Then iMaxValue = aValues(I)
	Next 'I
	If iMaxValue  = 0 Then Exit Sub
	'Response.Write iMaxValue & "  " ' Debugging line
	ReDim Preserve aTmp(UBound(aColors))
	' Calculate the width of the bars
	' Take the overall width and divide by number of items and round down.
	' I then reduce it by the size of the spacer so the end result
	' should be GRAPH_WIDTH or less!
	iBarWidth = (GRAPH_WIDTH \ (UBound(aValues) + 1)) - GRAPH_SPACER
	'Response.Write iBarWidth ' Debugging line
	' Start drawing the graph
	%>
	<TABLE BORDER="<%= TABLE_BORDER %>" CELLSPACING="0" CELLPADDING="0">
		<TR>
			<TD COLSPAN="3" ALIGN="center"><H2><%= strTitle %></H2></TD>
		</TR>
		<TR>
			<TD VALIGN="center"><B><%= strYAxisLabel %></B></TD>
			<TD VALIGN="top">
				<TABLE BORDER="<%= TABLE_BORDER %>" CELLSPACING="0" CELLPADDING="0">
					<TR>
						<TD ROWSPAN="2">
							<IMG SRC="./images/spacer.gif" BORDER="0"
								WIDTH="1" HEIGHT="<%= GRAPH_HEIGHT %>">
						</TD>
						<TD VALIGN="top" ALIGN="right"><%= iMaxValue %> </TD>
					</TR>
					<TR>
						<TD VALIGN="bottom" ALIGN="right">0 </TD>
					</TR>
				</TABLE>
			</TD>
			<TD>
				<TABLE BORDER="<%= TABLE_BORDER %>" CELLSPACING="0" CELLPADDING="0">
					<TR>
						<TD VALIGN="bottom"><IMG SRC="./images/spacer_black.gif"
							BORDER="0"
							WIDTH="<%= GRAPH_BORDER %>"
							HEIGHT="<%= GRAPH_HEIGHT %>"></TD>
						<%
						' We're now in the body of the chart.
						' Loop through the data showing the bars!
						For I = 0 To UBound(aValues)
							iBarHeight = Int((aValues(I) / iMaxValue) * GRAPH_HEIGHT)
							' This is a hack since browsers ignore a 0 as an image dimension!
							If iBarHeight = 0 Then iBarHeight = 1
							%>
							<TD VALIGN="bottom"><IMG SRC="./images/spacer.gif"
								BORDER="0"
								WIDTH="<%= GRAPH_SPACER %>"
								HEIGHT="1"></TD>
							<TD VALIGN="bottom"><%	
								For ii = UBound(aColors) - 1 To 0 Step - 1
									aTmp(ii) = Int((aBars(ii+1,I) / iMaxValue) * GRAPH_HEIGHT)
									%><IMG SRC="./images/spacer_<%= aColors(ii) %>.gif"
									BORDER="0" WIDTH="<%= iBarWidth %>"
									HEIGHT="<%= aTmp(ii) %>"
									ALT="<%= aBars(ii + 1, I) & vbTab & aToolTip(ii) %>"><br /><%  
								Next 'ii
							%></TD><%								
						Next 'I
						%>
					</TR>
				</TABLE>
				<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">
					<!-- I was using GRAPH_BORDER + GRAPH_WIDTH but it was
					moving the last x axis label -->
					<TR>
						<TD COLSPAN="<%= (UBound(aValues) + 1) %>"><IMG SRC="./images/spacer_black.gif"
							WIDTH="<%= GRAPH_BORDER + ((UBound(aValues) + 1) * (iBarWidth + GRAPH_SPACER)) %>"
							HEIGHT="<%= GRAPH_BORDER %>" BORDER="0"></TD>
					</TR>
						<%
						' The label array is optional and is really only useful
						' for small data sets with very short labels!
						%>
						<% If IsArray(aLabels) Then %>
							<TR>
							<% For I = 0 To UBound(aValues)
								iTmp = (GRAPH_BORDER + ((UBound(aValues) + 1) * _
									(iBarWidth + GRAPH_SPACER))) / (UBound(aValues) +1)
								iTmp = Int(Round(iTmp))
								%>
								<TD WIDTH="<%= iTmp %>" ALIGN="center"><FONT SIZE="2"><%= aLabels(I) %></FONT></TD>
							<% Next 'I %>;
							</TR>
						<% End If %>
				</TABLE>
			</TD>
		</TR>
	</TABLE>
	<%
End Sub
' Here is example code from a real application,
' we will use static data for our sample.
' ========================================================================
' Webmaster's Note: I've removed this to keep the script short and simple.
' It's available in the zip file version along with all the image files
' if you're interested in seeing the data access code.
' http://www.asp101.com/samples/download/bar_chart_stacked.zip
' ========================================================================
' Make up some fake data:
' For this example our chart will be five sensors (columns)
' with four states (stacks).
Dim i, ii, iNumSensors, iNumStates
Dim aValues(), aLabels(), aTooltip(), aColors(), aBars()
iNumSensors = 5
iNumStates = 4
ReDim Preserve aValues(iNumSensors)
ReDim Preserve aLabels(iNumSensors)
ReDim Preserve aTooltip(iNumStates)
ReDim Preserve aColors(iNumStates)
' Create the bar array one row per sensor
ReDim Preserve abars(iNumStates,iNumSensors)
For i = 0 to Ubound(abars,1)
   For ii = 0 to Ubound(abars,2)
      abars(i,ii) = 0
   Next 'ii
Next 'i
' set the total height of each column           
aValues(0) = 5
aValues(1) = 171
aValues(2) = 62
aValues(3) = 66
aValues(4) = 87
aValues(5) = 391
' set the data for the stacked bars           
aBars(0,0) = 1
aBars(0,1) = 1
aBars(0,2) = 1
aBars(0,3) = 1
aBars(0,4) = 1
aBars(0,5) = 5
aBars(1,0) = 32
aBars(1,1) = 112
aBars(1,2) = 6
aBars(1,3) = 11
aBars(1,4) = 10
aBars(1,5) = 171
aBars(2,0) = 6
aBars(2,1) = 18
aBars(2,2) = 4
aBars(2,3) = 14
aBars(2,4) = 20
aBars(2,5) = 62
aBars(3,0) = 13
aBars(3,1) = 0
aBars(3,2) = 10
aBars(3,3) = 13
aBars(3,4) = 30
aBars(3,5) = 66
aBars(4,0) = 10
aBars(4,1) = 7
aBars(4,2) = 30
aBars(4,3) = 0
aBars(4,4) = 40
aBars(4,5) = 87
' set the labels for the chart           
aLabels(0) = "S1" 
aLabels(1) = "S2" 
aLabels(2) = "S3" 
aLabels(3) = "S4" 
aLabels(4) = "S5" 
aLabels(5) = "Total"
' set the colors for the chart  
aColors(0) = "red" 
aColors(1) = "blue" 
aColors(2) = "yellow" 
aColors(3) = "lime" 
' set the Tool Tips for the chart  
aTooltip(0) = "Critical" 
aTooltip(1) = "Serious" 
aTooltip(2) = "Routine" 
aTooltip(3) = "Cleared" 
' This is the line that calls the function to display the chart
ShowStackedBarChart aValues, aLabels, "Sensor Summary", "Sensor ID", "N", aColors, aTooltip, aBars
%>

Back the the Sample Output

Back to the Sample Index


Home |  News |  Samples |  Articles |  Lessons |  Resources |  Forum |  Links |  Search |  Feedback

Internet.com
The Network for Technology Professionals

Search:

About Internet.com

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