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

By submitting your information, you agree that devx.com may send you DevX offers via email, phone and text message, as well as email offers about other products and services that DevX believes may be of interest to you. DevX will process your information in accordance with the Quinstreet Privacy Policy.


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