Codango: ASP Code Snippet

JSP
Share The Love
You are 1 of 23 Active ASP Visitors
ASP Home | Resources | Write a Review | My Favor-Its | Login
Pure ASP VML Pie ChartCode Snippet
Read Reviews | Report Errors
[+][+]
8
Reviews
3
Favor-It
Pure ASP VML Pie Chart provides the ASP code needed to dynamically generate a VML Pie Chart, viewable with IE 5.0 and above. Creating the chart is as easy as calling a function to add each item to the chart and setting the chart title. Code: ASP 3.0 & VBScript

		Code Snippet
Code Written By: Tyler Kline from objactive.netfirms.com
<%

	'	This page generates a pie chart using VML.  It will work in Internet Explorer
	'	browsers, version 5.5 and higher.  Although this provides a basis for generating
	'	a dynamic pie chart with VML, it's far from comprehensive.  One enhancement I 
	'	see adding in the future is making positioning a little more dynamic.  Right now,
	'	a lot of coordinates (pie center, legend location, etc.) are hard-coded.
	'
	'	Please feel free to contact me with any questions or comments you have.
	'
	'	Tyler Kline
	'	objactivesolutions@hotmail.com
	
	Response.Expires = -1000		' Make the page expire immediately, so it is always refreshed

	Dim iNumberOfValues				' Total number of values in the arrays
	Dim iValues()					' Holds the numeric values
	Dim sValues()					' Holds the text values
	Dim urlValues()					' Holds the url for the item, if any
	Dim iGrandTotal					' Total of all numeric values
	Dim sColors(9)					' Holds colors for the chart 
	Dim boolShowLegend				' Show legend or not
	Dim boolShowLabels				' Show slice labels or not
	Dim iLabelType					' What info should show on the labels
	Dim sChartTitle					' Title text of the chart
	
	' Get the show legend parameter if any
	' Possible values:
	'	True | 1		: Legend will be displayed
	'	False | 0		: Legend will not be displayed
	'	Default is False
	boolShowLegend = Request.QueryString("showlegend")
	If boolShowLegend = "" Then boolShowLegend = "False"


	' Get the show labels parameter if any
	' Possible values:
	'	True | 1		: Labels for each sliced will be displayed
	'	False | 0		: Labels for each sliced will not be displayed
	'	Default is False
	boolShowLabels = Request.QueryString("showlabels")
	If boolShowLabels = "" Then boolShowLabels = "False"
	
	
	' Get what information should be in the slice labels, if they are visible
	' Possible values:
	'	0				: The text associated with the slice
	'	1				: The value associated with the slice
	'	2				: The percentage of the slice
	'	3				: Text and value			ie.  Ohio (5,243)
	'	4				: Text and percentage		ie.  Ohio (19.2%)
	'	Default is 0 (Text)
	iLabelType = Request.QueryString("labeltype")
	If iLabelType = "" Then iLabelType = 0
	
	
%>
<%	
	' The sColors array holds 10 distinct colors.  The current logic takes the rightmost 
	' character of the current item, and uses that color
	sColors(0)	= "#330099"
	sColors(1)	= "#9933CC"
	sColors(2)	= "#CC0033"
	sColors(3)	= "#FF9900"
	sColors(4)	= "#00CC33"
	sColors(5)	= "#660033"
	sColors(6)	= "#0000CC"
	sColors(7)  = "#FF0033"
	sColors(8)	= "#330066"
	sColors(9)	= "#999966"
%>
<%	
	' The add value pair handles the logic of putting Text/Value pairs into the correct 
	' arrays.  It also increases the iNumberOfValues variable, which tells us how many
	' total items we have.
	Sub AddValuePair(sTitle, iNumber, sURL)
		iNumberOfValues = iNumberOfValues + 1
		ReDim Preserve iValues(iNumberOfValues)
		ReDim Preserve sValues(iNumberOfValues)
		ReDim Preserve urlValues(iNumberOfValues)
		iValues(iNumberOfValues) = iNumber
		sValues(iNumberOfValues) = sTitle
		urlValues(iNumberOfValues) = sURL
	End Sub	

%>
<%
	' The CalcTotal function simply adds all of our values up, and updates the iGrandTotal
	' variable with the grand total of all values.  This will be used when we start looking
	' for percentages
	Function CalcTotal()
		Dim iTemp
		Dim iLoop
		iTemp = 0
		For iLoop = 1 To iNumberOfValues
			iTemp = iTemp + iValues(iLoop)
		Next
		iGrandTotal = iTemp
	End Function
%>

<%
	
	' Actual page building logic starts here
	'
	'
	'
	
	' Give the chart a title
	sChartTitle = "Tyler's Test Pie Chart"

	' Load the arrays with 9 random values, for testing purposes
	' In real life, this array might be loaded from an ADO recordset
	Randomize
	For iLoop = 1 To 9
		AddValuePair FormatDateTime(DateAdd("d",iLoop,"8/1/2001"),vbLongDate), Int((100 - 5 + 1) * Rnd + 5),"http://www.microsoft.com"
	Next
	
	' Nothing below this needs to be modified.  Once the array is loaded, this bad boy
	' will draw itself
	
%>
		
<HTML xmlns:v="urn:schemas-microsoft-com:vml">
<HEAD>
	<TITLE><%=sChartTitle%></TITLE>
	<STYLE>
		v\:* {behavior:url(#default#VML);}
	</STYLE>
</HEAD>

<BODY BGCOLOR="#FFFFFF" LEFTMARGIN=0 STYLE="font-family:tahoma;font-size:8pt;color:black">



<! CHART BORDER>
<! This gives us a "frame" with a nice drop shadow to make the chart stand out a little>	
<v:rect style='position:absolute;left:10px;top:10px;width:700px;height:460px' fillcolor="white">
	<v:shadow on="true" offset="4pt,4pt" color="silver" />
</v:rect>

<! CHART TITLE>
<v:rect style='margin-top:0;position:absolute;left:20px;top:12px;width:680px;height:30px' strokecolor="white" fillcolor="white">
	<v:textbox style="font-family:tahoma;font-size:10pt;font-weight:bold;text-align:center"><%=sChartTitle%></v:textbox>
</v:rect>



 <%
	CalcTotal
	
	Dim iRunning			
	iRunning = 0
	
	' Loop through all of our values
	For iLoop = 1 to iNumberOfValues
		
		' Get the starting and ending angles
		iStartAngle		= 360 * (iRunning / iGrandTotal)
		iRunning		= iRunning + iValues(iLoop)
		iEndAngle		= (360 * (iRunning / iGrandTotal)) - iStartAngle
		
		' Get the center angle for this slice.  This is the angle the label line
		' will come out from
		iAngleCenter	= iStartAngle + ((iEndAngle) / 2)
		
		' Convert the angles into vector values
		iStartValue		= CLng(iStartAngle	* (2^16))
		iEndValue		= CLng(iEndAngle	* (2^16))
%>	

		<! This draws the slice>
		<v:shape OnMouseOver="HiLite('on')" OnMouseOut="HiLite('')"  <% If urlValues(iLoop) <> "" Then%> OnClick="GoToPage('<%=urlValues(iLoop)%>')" <%End If%> title="<%=sValues(iLoop) & " (" & FormatNumber(iValues(iLoop),0) & " - " & FormatNumber(100*(iValues(iLoop)/iGrandTotal),1) & "%)"%>" id="<%=iValues(iLoop)%>" style='cursor:hand;position:absolute;left:90px;top:10px;width:600px;height:600px' strokecolor="White" strokeweight=.25px path="M 320 350 AE 320 350 200 200 <%=iStartValue & " "%>  <%=iEndValue %> X E">		
			<v:fill type="gradient" color="<%=sColors(Right(iLoop,1))%>" color2="<%=sColors(Right(iLoop,1))%>" opacity="80%"/>
		</v:shape>
		
<%		' If we want the legend displayed, draw the legend for this item
		If boolShowLegend Then 
%>
			<v:rect style="position:absolute;left:510px;top:<%=(470 - ((iNumberOfValues * 23))) + ((iLoop - 1) * 22)%>px;width=20px;height:12px;" strokecolor="White" fillcolor="<%=sColors(Right(iLoop,1))%>"/>
			<v:textbox style="position:absolute;left:540px;top:<%=(470 - ((iNumberOfValues * 23))) + ((iLoop - 1) * 22)%>px;width=200px;height:20px;color:black;font-family:tahoma;font-size:8pt;font-weight:bold;text-align:left;"><%=sValues(iLoop)%></v:textbox>
<%		
		End If 
%>	
<%

		' Calculate the starting and ending points for the label lines.
		' This is a little complicated, because depending on which quadrant the line
		' falls in, we need to use different x and y coordinate multipliers.
		' We also have to manipulate the iAngleCenter value a little, too, so that
		' our formulas work correctly.  We also setup where the label text should be
		' displayed (sBoxPos variable)
		If iAngleCenter >=0 And iAngleCenter <=90 Then
			' Top Right quadrant
			iStartY = -1 * (110 * Sin(iAngleCenter * (3.141592 / 180)))
			iStartX = 1 * (110 * Cos(iAngleCenter * (3.141592 / 180)))
			iEndY = -1 * (160 * Sin(iAngleCenter * (3.141592 / 180)))
			iEndX = 1 * (160 * Cos(iAngleCenter * (3.141592 / 180)))
			sBoxPos = "position:absolute;left:" & 282 + (iEndX * 1.1) & ";top:" & 210 + (iEndY) - 5  & ";text-align:left;width:120;height:20;"
		ElseIf iAngleCenter >90 And iAngleCenter <=180 Then
			' Top Left quadrant
			iAngleCenter = 180 - iAngleCenter
			iStartY = -1 * (110 * Sin(iAngleCenter * (3.141592 / 180)))
			iStartX = -1 * (110 * Cos(iAngleCenter * (3.141592 / 180)))
			iEndY = -1 * (160 * Sin(iAngleCenter * (3.141592 / 180)))
			iEndX = -1 * (160 * Cos(iAngleCenter * (3.141592 / 180)))
			sBoxPos = "position:absolute;left:" & 282 + (iEndX * 1.05) - 120 & ";top:" & 210 + (iEndY) - 5  & ";text-align:right;width:120;height:20;"
		ElseIf iAngleCenter >180 And iAngleCenter <=270 Then
			' Bottom Left quadrant
			iAngleCenter = 180 + iAngleCenter
			iStartY = 1 * (110 * Sin(iAngleCenter * (3.141592 / 180)))
			iStartX = -1 * (110 * Cos(iAngleCenter * (3.141592 / 180)))
			iEndY = 1 * (160 * Sin(iAngleCenter * (3.141592 / 180)))
			iEndX = -1 * (160 * Cos(iAngleCenter * (3.141592 / 180)))
			sBoxPos = "position:absolute;left:" & 282 + (iEndX * 1.05) - 120 & ";top:" & 210 + (iEndY) + 5  & ";text-align:right;width:120;height:20;"
		ElseIf iAngleCenter >270 And iAngleCenter <=360 Then
			' Bottom Right quadrant
			iAngleCenter = 360 - iAngleCenter
			iStartY = 1 * (110 * Sin(iAngleCenter * (3.141592 / 180)))
			iStartX = 1 * (110 * Cos(iAngleCenter * (3.141592 / 180)))
			iEndY = 1 * (160 * Sin(iAngleCenter * (3.141592 / 180)))
			iEndX = 1 * (160 * Cos(iAngleCenter * (3.141592 / 180)))
			sBoxPos = "position:absolute;left:" & 282 + (iEndX * 1.1) & ";top:" & 210 + (iEndY) +5  & ";text-align:left;width:120;height:20;"
		End If
		
		' If we want to display the labels, draw the line
		If boolShowLabels Then 
			Select Case iLabelType
				Case 0
					sLabel = sValues(iLoop)
				Case 1
					sLabel = FormatNumber(iValues(iLoop),0)
				Case 2
					sLabel = FormatNumber(100*(iValues(iLoop)/iGrandTotal),1) & "%"
				Case 3
					sLabel = sValues(iLoop) & " (" & FormatNumber(iValues(iLoop),0) & ")"
				Case 4
					sLabel = sValues(iLoop) & " (" & FormatNumber(100*(iValues(iLoop)/iGrandTotal),1) & "%" & ")"
			End Select	
%>
			<v:line style="position:absolute;left:10px;top:10px;" from="<%=272 + iStartX%>px,<%=210 + iStartY%>px" to="<%=272 + iEndX%>px,<%=210 + iEndY%>px" strokecolor="black">
				<v:stroke startarrow="oval" startarrowlength="short" startarrowwidth="short"/>
			</v:line>	
			<v:textbox style="<%=sBoxPos%>"><%=sLabel%></v:textbox>
<% 
		End If 
	Next 
%>

</BODY>
</HTML>
<SCRIPT LANGUAGE=VBSCRIPT>
	Sub GoToPage(sURL)
		window.navigate sURL
	End Sub
	Sub HiLite(OnOff)
		If OnOff = "on" Then
			'window.event.srcElement.fillcolor = "red"
		Else
			'window.event.srcElement.opacity = "100%"
		End If
	End Sub
</SCRIPT>
To use the code above, click and drag your mouse over the code to highlight it. Then right click on the highlighted code and click "Copy." Now you may paste it into your code editor.

Submit Your Own Code to Codango

Link to Us \| About Us		Advertise \| Contact Us \| Website Help
Write a User Review Today! Its Fun, Fast, and Easy!	Codango Home \| PHP \| ASP.NET \| ASP \| JSP Advertise With Us \| About Us \| Terms of Use \| Privacy Policy


� 2013 ezd.com, All rights reserved