In the previous example we have seen how we can create a chart in Flash 8. In this section, we will modify the code to load chart data from external data source. To make the sample easy we will take a static XML file containing hardcoded data in it. In real-life implementation you can always use other dynamic sources.

If you wish to use FusionCharts in your Adobe Flex solutions please read Using Flex or if you wish to use FusionCharts in your Flash CS4/CS4 movies, please have a look at Using Flash CS3/CS4.

In this sample we will do the following:

• Make a copy of the existing MyFirstChart.fla file and rename it to ExternalXML.fla
• Load external data from Data.xml file

The code shown below works this out :

#include "com/fusioncharts/includes/LoadingFunctions.as"
#include "com/fusioncharts/includes/AppMessages.as"
import com.fusioncharts.core.charts.Column2DChart;
// Initialize XML object
var xmlData:XML = new XML();
// ------------- Define XML Data for the chart -------------- //
// Here, we're loading the XML data from an external file.
// For a simple head-start we've used a pre-defined Data.xml 
// Ideally, you would NOT use a physical data file. Instead you'll have 
// your own scripts/services/feeds to relay the XML data - dynamically built from 
// database or other data sources
// load XML from external XML 
// For your real-life project you can pass you XML building Url instead of "Data.xml"
xmlData.load("Data.xml");
// We render the chart after XML get loaded from external file
// Declare Event handler called when XML loads
xmlData.onLoad=function(success)
{
  //Only proceed if data has loaded successfully
  if (success){
  // -------------- Actual Code to create the chart ------------//
  //To create a chart, you first need to create an empty movie clip to act as chart holder.
  var chartContainerMC:MovieClip = createEmptyMovieClip("ChartHolder",1);

  //Now, instantiate the chart using Constructor function of the chart.
  /**
  * @param	targetMC	Movie clip reference in which
  *				the chart will create its own movie clip.s
  * @param	depth		Depth inside parent movie clip in which
  *				the chart will create its own movie clips.
  * @param	width		Width of chart
  * @param	height	        Height of chart
  * @param	x	        x Position of chart
  * @param	y	        y Position of chart
  * @param	debugMode	Boolean value indicating whether the chart
  *				is in debug mode.
  * @param	lang		2 Letter ISO code for the language of application
  *				messages. Depends on what data you've fed.
  * @param	scaleMode	Scale mode of the movie - noScale or exactFit
  */
  var myFirstChart:Column2DChart = new Column2DChart(chartContainerMC, 1, 450, 325, 20, 0, false, "EN", "noScale");
  //FusionCharts necessarily needs its data in XML format
  //to use the charts.
  //Convey the XML data to chart. 
  myFirstChart.setXMLData(xmlData);
  //Draw the chart
  myFirstChart.render();
  }
}
//Stop
stop();

In the above code we have done the following:

• Used XML class to load an external XML file (Data.xml)
  
  

  xmlData.load("Data.xml");

  
  
• Defined an event-listener to onLoad event of the XML object
  
  

  xmlData.onLoad=function(success)

  
  
• Rendered the chart in the listener code in the same way as we did in the previous sample.
  
  

  var chartContainerMC:MovieClip = createEmptyMovieClip("ChartHolder",1);
  var myFirstChart:Column2DChart = new Column2DChart(chartContainerMC, 1, 450, 325, 20, 0, false, "EN", "noScale");
  myFirstChart.setXMLData(xmlData);
  myFirstChart.render();

Please note that due to security issues, by default, Flash cannot load cross-domain external data unless cross domain xml is defined in the domain containing the swf.