Online Chat
 Call Us: 
1-877-744-1221
Browse Submit a Ticket
 
Advanced Search
Tools
Rss Categories

Update with new XML file

Author: Antony Corsten Reference Number: AA-00351 Views: 7217 Last Updated: 04/14/2010 08:45 PM 0 Rating/ Voters

Update with new XML file

Description of dynamic data update through xml_file on Javascript example


In this method, you provide the URL of XML Data Document to Flash Charts Pro®. 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 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
    1. Take in the passed parameters (if any)
    2. Process them
    3. Interact with the database
    4. Get data from data base in native objects like Recordsets, Data Readers etc.
    5. Convert this data into XML format using simple string concatenations or using XML DOM.
    6. Finally write this data to output stream (NOT physically on server).
  4. Flash Charts Pro® now accepts this XML data, parses it and finally renders the chart.

Javascript example:


For example we will create updateChartByFile() function, that will receive two parameters:

  • object identifier (object id) - should be unique for every Flash SWF object in case of several objects on one page. You create it embedding flash content: <object id="flashchart" ..> and <embed name="flashchart" ...>
  • variable 'file' (string) - this variable will receive XML file name URL

<script language="javascript" type="text/javascript">

function updateChartByFile(o, file) {

}

</script>

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

Our functionality is just changing the data XML source file with chart update by clicking on the correspondent page button. So we should put our function with required parameters on button click event (onClick):

<input type="button" value="Load XML File 1" onClick="updateChartByFile('flashchart', 'out/data/fcp-line-charts-v1.xml')">

<input type="button" value="Load XML File 2" onClick="updateChartByFile('flashchart', 'out/data/fcp-line-charts-v2.xml')">

<input type="button" value="Load XML File 3" onClick="updateChartByFile('flashchart', 'out/data/fcp-line-charts-v3.xml')">


Where:

  • flashchart - unique identifier of our FCP Chart object on the page
  • filename.xml - URL to our XML data file

So the whole code will look like this:

<html>

<head>

<title>FlashChartsPro® > Javascript Update Demo</title>

<script language="javascript" type="text/javascript">



function updateChartByFile(o, file) {

var FCObject = (navigator.appName.indexOf("Microsoft") !=-1 && !window.opera) ? window[o] : document[o];

FCObject.SetVariable('_root.xml_file', file);

}



</script>

</head>

<body>



<object id="flashchart" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="700" height="500">

<param name="movie" value="out/swf/fcp-line-chart.swf" />

<param name="bgcolor" value="#ffffff" />

<param name="quality" value="high" />

<param name="flashvars" value="xml_file=out/data/fcp-line-charts-v1.xml" />

<embed type="application/x-shockwave-flash" src="out/swf/fcp-line-chart.swf" width="700" height="500" name="flashchart" bgcolor="#ffffff" quality="high" flashvars="xml_file=out/data/fcp-line-charts-v1.xml" />

</object>



<form name="xmldemo">

<strong>Update chart:</strong>

<input type="button" value="Load XML File 1" onClick="updateChartByFile('flashchart', 'out/data/fcp-line-charts-v1.xml')">

<input type="button" value="Load XML File 2" onClick="updateChartByFile('flashchart', 'out/data/fcp-line-charts-v2.xml')">

<input type="button" value="Load XML File 3" onClick="updateChartByFile('flashchart', 'out/data/fcp-line-charts-v3.xml')">

</form>



</body>

</html>

Clicking on the "Load XML File 1" button browser forced to send two parameters (object name and URL to XML data file) to our function updateChartByFile() and FCP Chart will immediately render the chart based on new data from XML file.

Note
XML data URL 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 XML data URL method.
Knowledge Management Systems by: KnowledgeBase Manager Pro v6.2.2 (Built with: JS.GUI - AJAX Library)