Browse DevX
Sign up for e-mail newsletters from DevX


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

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.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Figure 2. An Overview: Here's a glimpse of what the entire data communication model might look like.

Lights! Camera! ActionScript!
Figure 2 shows the entire data communication model for this chart. The HTML wrapper page which embeds the Flash Column Chart provides the full XML data to Flash Column Chart:

<OBJECT> ... <PARAM NAME=movie VALUE="FCChart.swf"> <PARAM NAME="FlashVars" VALUE="&data=<chart>...full XML data here...</chart>"> ... <EMBED Src="FCChart.swf" ... FlashVars="&data=<chart>...full XML data here...</chart>" ...> </OBJECT>

Flash Column Charts picks this data up, parses it, and renders the chart.

The XML Structure
The Flash column chart only accept XML in the following format:

<chart caption='My Flash Chart' upperLimit='100' lowerLimit='0' bgColor='f1f1f1' canvasbgColor='ffffdd' upperLimit='100' numDivLines='3'> <set name='A' value='20' color='00CCFF' link='showDetails.asp?set=A'/> <set name='B' value='76' color='99CC00' link='showDetails.asp?set=B'/> <set name='C' value='54' color='FF99CC' link='showDetails.asp?set=C'/> <set name='D' value='43' color='9999FF' link='showDetails.asp?set=D'/> <set name='E' value='76' color='FF5904' link='showDetails.asp?set=E'/> </chart>

The <chart> element is the root element (i.e., the document element). <chart> has a number of properties that help configure the chart's layout by specifying the aesthetic settings.

To specify the data settings, use <set> elements. <set> elements, as in the XML code above, are the child elements of the <chart> element. For each piece of data you wish to plot, you have to specify a <set> element. Click here for a list of <set> element attributes.

The Flash Movie for the Chart
Open up FCChart.fla using Flash MX. You'll be presented a movie with the dimensions 350x280 pixels—this is the size of the chart that you'll be creating. Now, switch to the scenes dialog box (Modify—>Scene).

The Flash movie has two scenes: Loading and Chart. The Loading scene contains the pre-loader for the movie. A pre-loader is a sequence of text/graphics that is shown to the viewer until the entire .swf file (the compiled Flash movie) has been downloaded into his machine. Click here to learn more about making a pre-loader.

Figure 3. The Chart Scene: This scene shows all of the elements, ActionScripts, and objects that drive the chart.

Use Edit Scenes—>Chart to switch to the Chart Scene. Here you see all of the elements, ActionScripts, and objects that drive the chart. In this scene, you'll need to:

  • Declare global functions and constants which are used throughout the chart for general purpose.
  • Request the XML Data from the HTML page and check if it's valid.
  • Parse the data and store it in various objects/variables within the Flash Movie. Or display appropriate error message stating that the XML was invalid.
  • Calculate the various aspects of the chart: limits, positions of various elements, height of each of the column, etc.
  • Render the chart.
Figure 3 shows how this scene should look.

As you can see, the Chart Scene has six layers, which we'll examine more closely.

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