Get Your Charts in a Flash!, Part 4By Pallav Nadhani
In Part 3 we looked at creating the various frames needed for the FlashCharts. In this part we'll look at reading and parsing the XML document that contains the chart data.
Loading and Parsing XML Document
Macromedia Flash MX provides an excellent native XML Object to deal with XML data. Using this object, one can load, send, and parse XML documents inside Flash. For our application, we just need to load the XML data from the URL provided to the graph (using the
OBJECT/EMBED method which we
had discussed earlier), parse it and then use the parsed information to build the graph.
Specifically, all our XML loading and parsing activities would be contained in three frames, namely:
LoadXML is the frame where we instantiate the command to load the XML document. Open up
the Actions Panel for
Actions Layer > Frame LoadXML and enter the following action
The above ActionScript first initializes an instance of the XML document, storing it in the local
XMLDoc. We then instruct Flash that as soon as the XML document has been
completely downloaded in the movie, the function
fnloaded should be invoked. Next, we
get the path of the XML document that has to be loaded. The path is passed to the movie by the page
in which this movie is embedded as we had earlier seen using the
dataurl passed to the Flash movie from the ASP page in the format
FlashCharts.swf?dataurl=Data.asp is now accessible in Flash via
if statement, which is optional, specifies that a default XML file
should be loaded in the event that no
dataurl path has been provided. We invoke the
load method of the XML object to load the document. We append the time at the end of
the file name so that it is not cached.
fnloaded, which is invoked when the XML file is loaded, simply sends the
control to the
ParseXML keyframe wherein the XML document will be parsed to retrieve the
information. Finally, the
play() command keeps the movie playing, which moves the Flash
movie on to the next keyframe.
|For More Information on ActionScripting...|
|If this is the first time you've seen Macromedia's ActionScript, you may want to take a few minutes to familiarize yourself with the syntax and style before performing these steps on your own. There are a number of great ActionScripting Web sites available, such as ActionScripts.org and FlashKit.com's ActionScripting tutorials.|
Recall that our next keyframe is
LoadingXML - the frame that is displayed until the XML
document has been completely downloaded by Flash. We need to show the user some splash/loading screen
while the data is being fetched from the server. So, to achieve this, create a new layer called
Loading Contents and on the frames of this layer, place anything which you want your
users to see while the data is being loaded. The picture until now should look something like:
Also, in the Actions Panel of this frame, we just ask Flash to keep on playing, by adding the
following one line of ActionScript:
play() function is called in the
LoadingXML keyframe the control
is transferred to the keyframe
ParseXML. In this frame, we first check if the XML
document has been successfully downloaded or not. If it hasn't been downloaded, we send the control
LoadingXML to display the loading Frames. If it has been downloaded and it
doesn't contain any errors, we continue with the parsing process by invoking the custom function
parseXML();. However, if there is an error in parsing the XML file we transfer the
control to a keyframe
XMLError, which displays an error message to the user stating that
the XML received was malformed.
The following ActionScript, which should be placed in the
accomplishes these tasks:
The following function, parseXML helps in parsing the XML and retrieving the data from the XML
document. Parsing the XML document using the XML object in Flash is similar to the
XMLDocument() class in ASP.NET or the MSXML Parser in ASP. We have to traverse down the
tree using the methods and properties exposed by the XML object.
parseXML() function starts by creating an array to hold the childnodes of the XML
XMLDoc.childNodes returns a pointer to the root element of the XML document.
Next, we declare a variable
num to store the count of the datasets passed to the
movie (via the XML document). We then iterate through the first level children of the XML Doc to
search for the
If the element is the
<graph> element, then we access the graph attributes. To
access the attributes we use the
attributes collection in Flash. First, we get the
chartType of the graph and store it in the variable
chartType, and then the
caption and so on.
Next, we iterate through the data set. A check is made if the node name is
set - i.e., a
graph data set. If the element is
<set> then we retrieve and collect the values.
Finally, we redirect the control to the
setDefaults frame (the
command does it for us).
setDefaults frame is used to set the chart type. Open the Actions Panel for
Layer Actions > Frame setDefaults and enter the following ActionScript:
In the above ActionScript we first detect the chart type to be displayed by default. The
chartType attribute of the
<graph> element tells the graph as to
which graph (bar, pie or line) should be displayed by default. Recall that there are
three values which this attribute can take: bar, line or pie. You can assign any of these three values to
chartType attribute to determine which type of graph should initially be used. If no
value is supplied for this attribute, the default value is taken as bar.
Next, we need to create a function
setChart(chartInstance) that will later help us
manipulate the chart. In this function, we set the chart's parameter and the data.
We also need to create a function called
gotoUrl that will later act as the event
handler for the chart
onRelease function. That is, when the user clicks on the bars,
lines or pies of a chart, this function will be invoked.
Now, that we have the defaults for the graph calculated and stored in variables, it's time to apply them. In Part 5 we will set the various chart components in place.