 | |
| Figure 7. Default.asp: This form provides the interface for the database. |
When you click on the "Chart It!" button, you'll be taken to Chart.asp.
First, include the header files DBConn.asp and Colors.asp and render the and render the <HEAD> part:
<%@ Language=VBScript %>
<!-- #INCLUDE FILE='DBConn.asp' -->
<!-- #INCLUDE FILE='Colors.asp' -->
<HTML>
<HEAD>
<TITLE>
Factory Output Report - Chart
</TITLE>
<LINK REL='stylesheet' HREF='Styles.css'>
</HEAD>
<BODY TopMargin=0 LeftMargin=0>
Next, the data submitted at Default.asp is requested:
<%
'We first request the values from the previous page
Dim oRs, strQuery
Dim fromDate, toDate
Dim factoryId, bgColor, canvasBgColor, canvasBrdrColor
'strXML will be used to store the entire XML document generated
Dim strXML, intCounter, dateDiffer
intCounter = 0
factoryId = Request.Form("sFactory")
fromDate = Request.Form("fromDate")
toDate = Request.Form("toDate")
bgColor = Request.Form("bgColor")
canvasBgColor = Request.Form("canvasBgColor")
canvasBrdrColor = Request.Form("canvasBrdrColor")
Then, the database is queried and the XML is generated for the required date range:
'Initialize the RecordSet
Set oRs = Server.CreateObject("ADODB.Recordset")
'Generate the chart element string
strXML = "<chart caption='Factory Output report' bgColor='" & bgColor & "' canvasBgColor='" _
& canvasBgColor & "' canvasBrdrColor='" & canvasBrdrColor & "'>"
'get the difference between the two dates
dateDiffer = DateDiff("d", fromDate, toDate)
'Get the data for the selected factory
strQuery = "select * from Factory_Output where FactoryId=" & factoryId & " and DatePro>=#" _
& fromDate & "# and DatePro<=#" & dateAdd("d",1,toDate) & "#"
Set oRs = oConn.Execute(strQuery)
'Generate the <Set> tags now
While Not oRs.Eof
'Increase the counter
intCounter = intCounter + 1
strXML = strXML & "<set name='" & Datepart("m",ors("DatePro")) & "/" & DatePart("d",ors("DatePro")) _
& "' value='" & ors("Quantity") & "' color='" & colors(intCounter) &" '/>"
oRs.MoveNext
Wend
strXML = strXML & "</chart>"
Set oRs = nothing
%>
Finally, the HTML code to render the chart is written out:
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
WIDTH="350" HEIGHT="280" id="FCChart" ALIGN="" VIEWASTEXT>
<PARAM NAME=movie VALUE="FCChart.swf">
<param name=FlashVars value="&data=<% = strXML %>">
<PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF>
<EMBED src="FCChart.swf" FlashVars="&data=<% = strXML %>" _
quality=high bgcolor=#FFFFFF WIDTH="350" HEIGHT="280" NAME="FCChart" ALIGN=""
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED></OBJECT>
When you view the chart, it should look something like
Figure 8
 | |
| Figure 8. The final product! Here's a look at the completed Flash Colum Chart. |
Encore!
Now that you have your own Flash Chart, you don't need to rely on third-party solutions! The looks of this chart can easily be customized to suit your own and your audience's needs. Also, unlike static graphs, the animated graph makes viewing a pleasure. The small size of the graph makes it very suitable for narrow bandwidth connections. Also, the conversion of data to XML (which the chart needs) is very easy to do. A single page with the graph embedded in it can handle all the graphs for your site. An implementation of complete separation of data from presentation, this graph can work even in static servers, where .xml files are statically stored and are changed within a certain period. Also, this graph is compatible across a large number of platforms namely, ASP, ASP.NET, PHP, CGI, etc. This is but a mere glimpse into what you can accomplish with Flash.
Previous Page: Exporting the Movie
Pallav Nadhani is a Technology Architect at InfoSoft Global. His major skills lie in integrating Flash with server-sde technologies like ASP/ASP.NET/XML, etc. He is the co-author of the book ASP.NET for Macromedia Flash MX.
