Tools

Update with new data string

Author: Antony Corsten Reference Number: AA-00352 Views: 6150 Last Updated: 08/05/2009 06:00 AM

0 Rating/ Voters

Update with new data string

Description of dynamic data update through xml_string on Javascript example

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 steps are involved in this process:

You send the HTML content, chart SWF file and XML data all at once to the end viewer's browser.
Once the SWF is loaded on the end viewer's machine, it reads the XML data present on the same page
It finally parses it and then renders the chart.

Javascript example:

For example we will create updateChartByString() 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 string

Note

If your XML Data Document contains special characters in XML data mode, you'll need to XML/URL Encode them.

Now we declare XML string variables themselves:

var xml1 = '<graph>[...]</graph>';

var xml2 = '<graph>[...]</graph>';

var xml3 = '<graph>[...]</graph>';

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):

Where:

flashchart - que identifier of our FCP Chart object on the page
xml1, xml2, xml3 - variables with XML data

So the whole code will look like this:

<html>

<head>

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

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

function updateChartByString(o, data) {

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

FCObject.SetVariable('_root.xml_string', data);

}

var xml1 = '<graph><general_settings bg_color="F6F6F6" showAnchor="1" showArea="0" type_animation="1"><header text="Annual Economic Growth" font="Verdana" color="000000" size="18" /><subheader text="GDP Growth 1983-2006" font="Verdana" color="000000" size="12" /><legend font="Verdana" color="000000" font_size="11" /><legend_popup font="Verdana" bgcolor="FFFFE3" font_size="10" /><Xheaders rotate="90" color="000000" size="9" title="" title_color="000000" /><Yheaders color="000000" size="10" title="%" title_rotate="0" title_color="000000" /><grid showX="1" showY="1" persent_stepY_from_stepX="175" grid_width="550" grid_height="250" grid_color="000000" grid_alpha="40" grid_thickness="1" bg_color="ffffff" bg_alpha="100" alternate_bg_color="FFFCF0" border_color="000000" border_thickness="2" /></general_settings><abscissa_data><x value="1983" /><x value="1984" /><x value="1985" /><x value="1986" /><x value="1987" /><x value="1988" /><x value="1989" /><x value="1990" /><x value="1991" /><x value="1992" /><x value="1993" /><x value="1994" /><x value="1995" /><x value="1996" /><x value="1997" /><x value="1998" /><x value="1999" /><x value="2000" /><x value="2001" /><x value="2002" /><x value="2003" /><x value="2004" /><x value="2005" /><x value="2006" /></abscissa_data><ordinate_data seriesName="Germany" color="0080C0" size="3.5"><y value="3.6" /><y value="7.1" /><y value="8.5" /><y value="9.2" /><y value="10.1" /><y value="11.6" /><y value="16.4" /><y value="18.0" /><y value="13.2" /><y value="12.0" /><y value="3.2" /><y value="4.1" /><y value="6.3" /><y value="9.4" /><y value="11.5" /><y value="13.5" /><y value="14.8" /><y value="16.6" /><y value="18.1" /><y value="17.0" /><y value="16.6" /><y value="14.1" /><y value="15.7" /><y value="12.0" /></ordinate_data><ordinate_data seriesName="UK" color="FF0000" size="3.5"><y value="2.3" /><y value="4.0" /><y value="6.2" /><y value="11.8" /><y value="13.0" /><y value="13.9" /><y value="18.0" /><y value="23.3" /><y value="24.7" /><y value="18.0" /><y value="15.1" /><y value="11.3" /><y value="14.2" /><y value="13.7" /><y value="9.9" /><y value="12.1" /><y value="13.5" /><y value="15.1" /><y value="17.9" /><y value="18.9" /><y value="20.3" /><y value="20.7" /><y value="21.6" /><y value="22.5" /></ordinate_data><ordinate_data seriesName="France" color="FF0080" size="3.5"><y value="2.8" /><y value="4.1" /><y value="5.1" /><y value="6.5" /><y value="12.5" /><y value="18.0" /><y value="21.0" /><y value="20.3" /><y value="19.2" /><y value="14.4" /><y value="9.2" /><y value="5.9" /><y value="5.2" /><y value="4.7" /><y value="4.2" /><y value="1.2" /><y value="5.4" /><y value="6.3" /><y value="8.9" /><y value="10.1" /><y value="11.5" /><y value="12.2" /><y value="10" /><y value="8.9" /></ordinate_data><ordinate_data seriesName="USA" color="FF8040" size="3.5"><y value="11.5" /><y value="14.1" /><y value="17.5" /><y value="18.9" /><y value="20.8" /><y value="22.9" /><y value="25.2" /><y value="27.0" /><y value="26.5" /><y value="25.3" /><y value="23.4" /><y value="19.5" /><y value="17.8" /><y value="16.2" /><y value="15.4" /><y value="14.0" /><y value="12.5" /><y value="10.8" /><y value="8.9" /><y value="8.0" /><y value="6.2" /><y value="5.1" /><y value="3.7" /><y value="1.5" /></ordinate_data></graph>';

var xml2 = '<graph><general_settings bg_color="F0E7E2" showAnchor="0" showArea="0" type_animation="2"><header text="Forecasting whale food supply" font="Verdana" color="000000" size="18" /><subheader text="Calanus plankton" font="Verdana" color="000000" size="15" /><legend font="Verdana" color="000000" font_size="11" /><legend_popup font="Verdana" bgcolor="FFFFE3" font_size="10" /><Xheaders rotate="90" color="000000" size="10" title="40-year graph" title_color="000000" /><Yheaders color="000000" size="10" title="Whale food supply (Calanus index)" title_rotate="90" title_color="000000" /><grid showX="0" showY="1" persent_stepY_from_stepX="100" grid_width="550" grid_height="250" grid_color="000000" grid_alpha="40" grid_thickness="1" bg_color="FEFFFF" bg_alpha="100" alternate_bg_color="FFFDFB" border_color="000000" border_thickness="1" /></general_settings><abscissa_data><x value="1960" /><x value="1965" /><x value="1970" /><x value="1975" /><x value="1980" /><x value="1985" /><x value="1990" /><x value="1995" /><x value="2000" /><x value="2005" /><x value="2010" /></abscissa_data><ordinate_data seriesName="Forecasts based on slope water temperature" color="0080C0" size="3.5"><y value="3.6" /><y value="7.1" /><y value="0" /><y value="-1.2" /><y value="-2.5" /><y value="-5.0" /><y value="-2.3" /><y value="-0.4" /><y value="2.3" /><y value="4.7" /><y value="5.9" /></ordinate_data><ordinate_data seriesName="Forecasts based on NAO index" color="FF0000" size="3.5"><y value="-1.6" /><y value="-2.1" /><y value="-3.5" /><y value="-2.9" /><y value="-1.7" /><y value="" /><y value="1.3" /><y value="2.4" /><y value="5.3" /><y value="3.7" /><y value="2.9" /></ordinate_data><ordinate_data seriesName="Calnus index" color="FF0080" size="3.5"><y value="" /><y value="-7.5" /><y value="4.6" /><y value="2.5" /><y value="1.9" /><y value="-2.1" /><y value="-2.9" /><y value="-3.3" /><y value="-2.3" /><y value="-1.0" /><y value="0" /></ordinate_data></graph>';

var xml3 = '<graph><general_settings bg_color="ffffff" showAnchor="1" showArea="0" type_animation="2"><header text="TSR performance graph" font="Verdana" color="000000" size="18" /><subheader text="Performance of the company relative to the FTSE 100 index" font="Verdana" color="000000" size="14" /><legend font="Verdana" color="000000" font_size="11" /><legend_popup font="Verdana" bgcolor="FFFFE3" font_size="10" /><Xheaders rotate="90" color="000000" size="10" title="" title_color="000000" /><Yheaders color="000000" size="10" title="" title_rotate="90" title_color="000000" /><grid showX="1" showY="1" persent_stepY_from_stepX="120" grid_width="550" grid_height="250" grid_color="000000" grid_alpha="20" grid_thickness="1" bg_color="ffffff" bg_alpha="100" alternate_bg_color="ffffff" border_color="000000" border_thickness="2" /></general_settings><abscissa_data><x value="00:00" /><x value="01:00" /><x value="02:00" /><x value="03:00" /><x value="04:00" /><x value="05:00" /><x value="06:00" /><x value="07:00" /><x value="08:00" /><x value="09:00" /><x value="10:00" /><x value="11:00" /><x value="12:00" /><x value="13:00" /><x value="14:00" /><x value="15:00" /><x value="16:00" /><x value="17:00" /><x value="18:00" /><x value="19:00" /><x value="20:00" /><x value="21:00" /><x value="22:00" /><x value="23:00" /></abscissa_data><ordinate_data seriesName="Load A" color="0080C0" size="3.5"><y value="-36" /><y value="-71" /><y value="-85" /><y value="-92" /><y value="-101" /><y value="-116" /><y value="-164" /><y value="-180" /><y value="-192" /><y value="-262" /><y value="-319" /><y value="-489" /><y value="-633" /><y value="-904" /><y value="-1215" /><y value="-1358" /><y value="-1482" /><y value="-1666" /><y value="-1811" /><y value="-2051" /><y value="-2138" /><y value="-2209" /><y value="-2247" /><y value="-2301" /></ordinate_data><ordinate_data seriesName="Risk B" color="FF0000" size="3.5"><y value="-23" /><y value="-40" /><y value="-62" /><y value="-118" /><y value="-130" /><y value="-139" /><y value="-158" /><y value="-233" /><y value="-297" /><y value="-379" /><y value="-503" /><y value="-687" /><y value="-746" /><y value="-857" /><y value="-973" /><y value="-1125" /><y value="-1320" /><y value="-1518" /><y value="-1797" /><y value="-1893" /><y value="-2010" /><y value="-2057" /><y value="-2166" /><y value="-2197" /></ordinate_data><ordinate_data seriesName="Loss C" color="FF0080" size="3.5"><y value="-980" /><y value="-1112" /><y value="-1192" /><y value="-1219" /><y value="-1264" /><y value="-1282" /><y value="-1365" /><y value="-1433" /><y value="-1559" /><y value="-1823" /><y value="-1967" /><y value="-2098" /><y value="-2202" /><y value="-2222" /><y value="-2259" /><y value="-2264" /><y value="-2282" /><y value="-2365" /><y value="-2433" /><y value="-2559" /><y value="-2823" /><y value="-2867" /><y value="-2867" /><y value="-2867" /></ordinate_data></graph>';

</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 String 1" onClick="updateChartByString('flashchart', xml1)">

<input type="button" value="Load XML String 2" onClick="updateChartByString('flashchart', xml2)">

<input type="button" value="Load XML String 3" onClick="updateChartByString('flashchart', xml3)">

</form>

</body>

</html>

Clicking on the "Load XML String 1" button browser forced to send two parameters (object name and xml1 variable containing our XML string data) to our function updateChartByString() and FCP Chart will immediately render the chart based on new data from XML string.

Note

Note: XML data string method is not recommended if you have higher amounts of data. In that case, use should use XML Data URL method.