In this method, you provide the URL of XML Data Document to FusionCharts. The chart now sends a request for XML data to the specified URL, reads it, parses it and then renders the charts accordingly. The following diagram would help you understand better:

(Click on the diagram below to see the animated feature tour on this process)

As you can see above, the following steps are involved in this process:

1.     You first send the HTML content and SWF file to the end viewer's browser. Along with the SWF, you also tell where the data is to be pulled from. This URL points to your server side scripts which would output the XML data document for the chart.

2.     Once the SWF is loaded on the end viewer's machine, it sends a request for XML data document to the specified URL.

3.     Your server side scripts at this URL now

o    Take in the passed parameters (if any)

o    Process them

o    Interact with the database

o    Get data from data base in native objects like Recordsets, Data Readers etc.

o    Convert this data into XML format using simple string concatenations or using XML DOM.

o    Finally write this data to output stream (NOT physically on server).

4.     FusionCharts now accepts this XML data, parses it and finally renders the chart.

Effectively, in this process you need the following to build a chart:

1.     Chart Container Page - The page which contains the HTML code to embed and show the chart. This page contains the URL for XML Data Document also.

2.     Chart SWF File

3.     Data Provider Page - The page which will provide XML Data to FusionCharts. This page outputs ONLY XML and no HTML tags.

Sample Usage of dataURL method using direct HTML Embedding Method

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="500" height="300" id="Column2D" align="center">
   <param name="movie" value="Column2D.swf" />
   <param name="FlashVars" value="&dataURL=Data.asp" />
   <param name="quality" value="high" />
   <embed src="Column2D.swf" FlashVars="&dataURL=Data.asp" quality="high" bgcolor="#ffffff" width="400" height="300" name="Column2D" align="center" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

Sample Usage of dataURL method using FusionCharts JavaScript Class

<div id="chart1div">
   This text is replaced by the chart.
</div>
<script type="text/javascript">
   var chart1 = new FusionCharts("Column2D.swf", "ChId1", "600", "400", "0", "0");
   chart1.setDataURL("Data.asp");
   chart1.render("chart1div");
</script>

dataURL method is the recommended method as it does not place any limits on the size of XML Data. Also, if you're using special characters (UTF-8 or double byte characters) in your XML, you need to necessarily use dataURL method.

In this method, you send the XML data along with the HTML Content and chart SWF file to the browser. The SWF loads, reads this data (present in same page) and then renders the chart. The following diagram would help you understand better:

(Click on the diagram below to see the animated feature tour on this process)

As you can see above, the following steps are involved in this process:

1.     You send the HTML content, chart SWF file and XML data all at once to the end viewer's browser.

2.     Once the SWF is loaded on the end viewer's machine, it reads the XML data present on the same page

3.     It finally parses it and then renders the chart.

Effectively, in this process you need the following to build a chart:

1.     Chart Container Page - The page which contains the HTML code to embed and show the chart. It also contains the XML data to be used by the chart.

2.     Chart SWF File

Sample Usage of dataXML method using direct HTML Embedding Method

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="500" height="300" id="Column2D" align="center">
   <param name="movie" value="Column2D.swf" />
   <param name="FlashVars" value="&dataXML=<chart><set name='Data1' value='1' /></chart>" />
   <param name="quality" value="high" />
   <embed src="Column2D.swf" FlashVars="&dataXML=<chart><set name='Data1' value='1' /></chart>" quality="high" bgcolor="#ffffff" width="400" height="300" name="Column2D" align="center" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

Sample Usage of dataXML method using FusionCharts JavaScript Class

<div id="chart1div">
   This text is replaced by the chart.
</div>
<script type="text/javascript">
   var chart1 = new FusionCharts("Column2D.swf", "ChId1", "600", "400", "0", "0");
   chart1.setDataXML("<chart><set name='Data1' value='1' /></chart>");
   chart1.render("chart1div");
</script>

dataXML method is not recommended if you've higher amounts of data. In that case, use dataURL method.

In this method, you provide the XML data to FusionCharts using JavaScript functions (present on the same page in which chart is present). The following diagram would help you understand better:

(Click on the diagram below to see the animated feature tour on this process)

As you can see above, the following steps involved in this:

1.     Your server first sends the HTML content of the page and the chart SWF. Now, along with this, it also sends data for chart either as JavaScript arrays or XML stored in JavaScript string variables.

2.     Once the SWF is loaded, it registers itself with pre-defined JavaScript function FC_Rendered.

3.     Now, if the data was sent as JavaScript arrays, your JavaScript functions convert it into XML data document using string concatenation. Or, if you're using AJAX, you can also request ready-made XML data from your server.

4.     This XML data is conveyed to the chart using the pre-build setDataXML method (defined in FusionCharts class).

5.     The chart reads the data, parses it and then renders.

Sample Usage of JavaScript + setDataXML method

<SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js">
//You need to include the above JS file, if you intend to embed the chart using JavaScript.
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
//All our data is stored in the "data" JavaScript array. This array was written using a server side script

function FC_Rendered(DOMId){
   //This method is called whenever a FusionCharts chart is loaded.
   //Check if it's the required chart using ID
   if (DOMId=="ChId1"){
       //Invoke updateChart() method to update chart with new data
       updateChart();
   }
}

function updateChart(){
   //Storage for XML data document
   var strXML = "<chart palette='2' caption='Factory Output ' >";
   //Here, we build the XML data document from data array using string concatenation
   //.... Build ....
   //Closing Chart Element
   strXML = strXML + "</chart>";

   //Get reference to chart object using Dom ID "ChId1"
   var chartObj = getChartFromId("ChId1");
   //Update its XML
   chartObj.setDataXML(strXML);
}
</SCRIPT>

<BODY>
<div id="chart1div">
   This text is replaced by the chart.
</div>
<script type="text/javascript">
   var chart1 = new FusionCharts("Column2D.swf", "ChId1", "600", "400", "0", "1");
   //Start Chart with empty data as we'll later update using JavaScript
   chart1.setDataXML("<chart></chart>");
   chart1.render("chart1div");
</script>
</BODY>

In this method, you provide the URL of XML data to FusionCharts using JavaScript functions (present on the same page in which chart is present). The chart then sends a request for XML data to the specified URL, reads it, parses it and then renders the charts accordingly. The following diagram would help you understand better:

(Click on the diagram below to see the animated feature tour on this process)

As you can see above, the following steps involved in this:

1.     Your server first sends the HTML content of the page and the chart SWF. Now, along with this, it also sends pre-defined JavaScript functions to update the chart.

2.     Once the SWF is loaded, it registers itself with pre-defined JavaScript function FC_Rendered.

3.     Your JavaScript functions now update the chart using setDataURL method, by passing the URL of XML Data Document.

4.     The chart sends a request for the XML data, reads it, parses it and then renders.

Sample Usage of JavaScript + setDataURL method

<SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js">
//You need to include the above JS file, if you intend to embed the chart using JavaScript.
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">

function FC_Rendered(DOMId){
   //This method is called whenever a FusionCharts chart is loaded.
   //Check if it's the required chart using ID
   if (DOMId=="ChId1"){
       //Invoke updateChart() method to update chart with new data
       updateChart();
   }
}

function updateChart(){
   //Get reference to chart object using Dom ID "ChId1"
   var chartObj = getChartFromId("ChId1");
   //Update its XML Data URL
   chartObj.setDataURL("Data.asp");
}
</SCRIPT>

<BODY>
<div id="chart1div">
   This text is replaced by the chart.
</div>
<script type="text/javascript">
   var chart1 = new FusionCharts("Column2D.swf", "ChId1", "600", "400", "0", "1");
   //Start Chart with empty data as we'll later update using JavaScript
   chart1.setDataXML("<chart></chart>");
   chart1.render("chart1div");
</script>
</BODY>