|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:
<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>" ...>
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'/>
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 pixelsthis 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.
shows how this scene should look.
As you can see, the Chart Scene has six layers, which we'll examine more closely.