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 5

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.

Parsing the XML Data
When XML document has been loaded, retrieve the data from the XML document and store it in local data storage objects. First, you need to initialize the local objects, arrays, and variables used to store the data. These are defined in Frame 1 of the Actions layer. Basically, there are three objects used to store data:
  1. _global.data: This stores instances of the _global.dataSet object (discussed just below). The array has n rows, where n is the number of data sets passed in the XML document.
  2. _global.dataSet: This stores all the external (supplied by the XML doc) and internal (calculated by the chart) values for a particular dataset. The values include name, value, color, and link of a set along with its width, height, and x and y positions.
  3. _global.chartParams: This stores the external (supplied by the XML doc—e.g., bgColor) and internal (calculated by the chart e.g., canvas width) parameters of the chart.
Listing 2 shows the entire code for initialization.

Now, parse the data. Declare the local variables you will use while parsing:

//chartNodes will contain the child nodes of the XML Doc passed to it. //setNodes will contain the <set> elements and their attributes var chartNodes, setNodes; //Temporary variables to store the set attributes var setName, setValue, setLink, setColor; chartNodes = new Array(); setNodes = new Array();

Next, get a reference to the <chart> node i.e., the root element or document element of the chart:

chartNodes = xmlData.childNodes;

You also need to declare a global counter variable to keep a track of how many datasets have been passed to the chart via the XML:

_global.chartParams.num = 0;

Now, iterate through the first level nodes of the XML document and look for the <chart> element:

for (j=0; j<=chartNodes.length; j++) { //Check if the node Name is Chart if (chartNodes[j].nodeName.toUpperCase() == "CHART") {

Once the <chart> element has been found, extract its attributes and store it in the global object _global.chartParams (Listing 3).

After you've extracted all of <chart>'s attributes, extract all the <set> elements and their attributes. Get a reference to <chart>'s child nodes:

//Now, get the <set> nodes setNodes = chartNodes[j].childNodes;

Iterate through the extracted nodes, look for <set> nodes, and extract their attributes:

for (k=0; k<=setNodes.length; k++) { //If the node name is Set i.e., a chart data set, then we retrieve //and collect the values if (setNodes[k].nodeName == "set") { //Get the x-axis name setName = setNodes[k].attributes.name; //Get the value setValue = setNodes[k].attributes.value; //Get the color - set the default color as 0099FF setColor = getPrimaryValue(setNodes[k].attributes.color, "0099FF"); //Get the link setLink = setNodes[k].attributes.link; //Now, only if we have been specified the setValue, we add this if (setColor != undefined && setColor != null) { //Increment the counter _global.chartParams.num++; //Create an object in _global.data to represent this _global.data[_global.chartParams.num] = new _global.dataSet(setName, setValue, setColor, setLink); } } } }

Finally, clean up the temporary objects and move to the next frame.

//Delete the temporary elements now delete xmlData; delete setNodes; delete chartNodes; } //Now, move ahead to the next keyframe play();

The entire code to load and parse the XML data is shown in Listing 4.

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