dataURL Method

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:

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.

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

  2. Your server side scripts at this URL now
    • Take in the passed parameters (if any)
    • Process them
    • Interact with the database. [ Server side scripts also can use forms or arrays as data source. ]
    • Get data from data base in native objects like Recordsets, Data Readers etc.
    • Convert this data into XML format using simple string concatenations or using XML DOM.
    • Finally write this data to output stream (NOT physically on server).

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

If your dataURL contains special characters like ?, & etc., you need to URL Encode the entire URL. Also, if you want to pass any parameters as part of dataURL to your server side scripts, you'll need to URL Encode the entire dataURL. Example: if you want to provide data URL as Data.asp?id=1&subId=2, it should be provided as Data%2Easp%3Fid%3D1%26subId%3D2.
 

As explained earlier, you need the following elements to build a chart using dataURL method:

  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 FusionCharts JavaScript Class receiving data from a pre-built XML document
<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.xml");
   chart1.render("chart1div");
</script>
 
Sample Usage of dataURL method using FusionCharts JavaScript Class receiving data from a server side script file
<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>
 
Sample Usage of dataURL method using FusionCharts JavaScript Class passing parameters to server side script file
<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");
   //To pass parameters, URLEncode the dataURL. Use escape() in JavaScript
   chart1.setDataURL(escape("Data.asp?id=1&subId=2"));
   chart1.render("chart1div");
</script>

Since parameter query string passed to the server side script contains characters like ?, & etc. , you need to URL Encode the entire dataURL. For example, if you want to provide data URL as Data.asp?id=1&subId=2, it should be provided as Data%2Easp%3Fid%3D1%26subId%3D2. In JavaScript you can use escape(dataURL) function. In ASP and ASP.NET pages you can use Server.URLEncode(dataURL) function. In PHP pages you can use urlencode(dataURL) function.

 
Sample Usage of dataURL method using direct HTML Embedding and receiving data from a pre-built XML document
<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="middle">
   <param name="movie" value="Column2D.swf" />
   <param name="FlashVars" value="&dataURL=Data.xml&chartWidth=500&chartHeight=300" />
   <param name="quality" value="high" />
   <embed src="Column2D.swf" FlashVars="&dataURL=Data.xml&chartWidth=500&chartHeight=300" quality="high" bgcolor="#ffffff" width="400" height="300" name="Column2D" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
 
Sample Usage of dataURL method using direct HTML Embedding and a server side script as data provider
<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="middle">
   <param name="movie" value="Column2D.swf" />
   <param name="FlashVars" value="&dataURL=Data.asp&chartWidth=500&chartHeight=300" />
   <param name="quality" value="high" />
   <embed src="Column2D.swf" FlashVars="&dataURL=Data.asp&chartWidth=500&chartHeight=300" quality="high" bgcolor="#ffffff" width="400" height="300" name="Column2D" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
 
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.