Login | Register   
RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Build a Better Charting Engine Using Flash and XML : Page 8

When you need to display data as charts in a Web app, forget about precompiled DLLs, assemblies, and expensive third-party components. This article will teach you how to use Flash MX to take data from any server-side script and render it in sleek-looking, animated charts.

The Front-end of the Application
You've got a way to access your data, now you need a way to present it. This application uses ASP pages to create an interface for your DB app:
  • DBConn.asp: Data Connection String container
  • Colors.asp: Contains a single dimension array named Colors. Each row in the array contains the hexadecimal code for a color (without the #). Use this array later to get different colors for different data sets.
  • ColorPicker.asp: Consists of a DHTML color selector.
  • Default.asp: The form where the user picks the factory whose data he wishes to see.
  • Chart.asp: Requests the data submitted to it (by Default.asp), processes it, interacts with the DB, and finally renders the Flash Column Chart.
Default.asp is a simple database driven form that aids the user in selecting the factory and date apart from a few chart visual properties. Figure 7 shows the interface.

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.

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.

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.
Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date