Read in 7 successive "XML" files (not pure XML format & held in "Gallery/Data" external dir) in a For Loop:
(US_SUMlev_2008.xml,US_SUMlev_2009.xml.....to US_SUMlev_2014.xml)
see: http://www.jcsweb.biz/mef/AnimGIF/XMLtemp_04c.htm for required output
These XML then need to succesively update a string variable "strXML" in the webpage code below which forms the "data" populating a time-series chart. "strXML" then acts as the input to "setDataXML" which is the Chart's data update method (?)
The sequential updating of "strXML" in a For Loop should the create a psuedo-animation effect in the chart.
My code (see below in edited format or view source at above URL) will achieve what I want but the "strXML" variable update is currently HARD-CODED (rather than read from the XML files held in external directory "Gallery/Data" ). The required function will also need to strip out all linbreaks ("\n") from the external XML files in order to produce a single line of stringtext: eg
- Code: Select all
<chart animation='0' caption= 'Chart1' yAxisName=' % change' ><categories> <category label='2008' /> <category label='2009' /> <category label='2010' /> <category label='2011' /> <category label='2012' /> <category label='2013' /> <category label='2014' /></categories><dataset seriesName='zGDP_u' color='6600CC' renderAs='Column' dashed='1'><set value='0.000000' /></dataset><dataset seriesName='zCPI_u' color='0000DC' renderAs='Line' ><set value='0.000000' /></dataset><dataset seriesName='ERIb_u' color='FFAA26' renderAs='Line' ><set value='0.000000' /></dataset><dataset seriesName='RSH_u' color='FF0066' renderAs='Line' ><set value='0.000000' /></dataset><dataset seriesName='zER_u' color='00FF00' renderAs='Line' ><set value='0.000000' /></dataset></chart>
The sequential updating of "strXML" is also NOT yet done in a For Loop but a fixed timing Animate() function which successivley activates the generateXML_200?() on a timedelay.
Summary: Required Runstream in Function For Loop:
Loop1: Read-in "Gallery/Data/US_SUMlev_2008.xml", strip out "\n", update strXML (& thus setDataXML) & update chart1
Loop2: Read-in "Gallery/Data/US_SUMlev_2009.xml", strip out "\n", update strXML (& thus setDataXML) & update chart1
etc etc until
Loop7: Read-in "Gallery/Data/US_SUMlev_2014.xml", strip out "\n", update strXML (& thus setDataXML) & update chart1
Return to Loop 1 data & start again (to repeat the "animation " effect)
If there was a way to "Freeze" and "Restart" this above "update" function (ie pause the read-in of the next XML) as in current code/page that would be mighty fine too.
Any help much appreciated
- Code: Select all
<HTML>
<HEAD>
<script language="Javascript" SRC="FC_v3_2.js"></script>
<script language="JavaScript">
var strXML;
function generateXML_2008(){
strXML = "<chart animation='0' caption= 'Chart1' yAxisName=' % change' ><categories> <category label='2008' /> <category label='2009' /> <category label='2010' /> <category label='2011' /> <category label='2012' /> <category label='2013' /> <category label='2014' /></categories><dataset seriesName='zGDP_u' color='6600CC' renderAs='Column' dashed='1'><set value='0.000000' /></dataset><dataset seriesName='zCPI_u' color='0000DC' renderAs='Line' ><set value='0.000000' /></dataset><dataset seriesName='ERIb_u' color='FFAA26' renderAs='Line' ><set value='0.000000' /></dataset><dataset seriesName='RSH_u' color='FF0066' renderAs='Line' ><set value='0.000000' /></dataset><dataset seriesName='zER_u' color='00FF00' renderAs='Line' ><set value='0.000000' /></dataset></chart>" ;
return strXML; }
function generateXML_2009(){ TRUNCATED - extends data by 1 year}
function generateXML_2010(){ TRUNCATED - extends data by 1 year}
function generateXML_2011(){ TRUNCATED - extends data by 1 year}
function generateXML_2012(){ TRUNCATED - extends data by 1 year}
function generateXML_2013(){ TRUNCATED - extends data by 1 year}
function generateXML_2014(){
strXML = "<chart animation='0' showValues='0' caption= 'Chart1' yAxisName=' % change' ><categories> <category label='2008' /> <category label='2009' /> <category label='2010' /> <category label='2011' /> <category label='2012' /> <category label='2013' /> <category label='2014' /></categories><dataset seriesName='zGDP_u' color='6600CC' renderAs='Column'><set value='0.000000' /><set value='-0.055113' /><set value='-0.022272' /><set value='0.052834' /><set value='0.029910' /><set value='0.016847' /><set value='0.003139' /></dataset><dataset seriesName='zCPI_u' color='0000DC' renderAs='Line' ><set value='0.000000' /><set value='0.000470' /><set value='-0.009643' /><set value='0.004135' /><set value='0.000321' /><set value='0.000019' /><set value='-0.000719' /></dataset><dataset seriesName='ERIb_u' color='FFAA26' renderAs='Line' ><set value='0.000000' /><set value='0.142439' /><set value='0.130952' /><set value='0.102297' /><set value='0.083231' /><set value='0.062888' /><set value='0.043371' /></dataset><dataset seriesName='RSH_u' color='FF0066' renderAs='Line' ><set value='0.000000' /><set value='0.238348' /><set value='0.000000' /><set value='0.002127' /><set value='0.001261' /><set value='0.011962' /><set value='0.015624' /></dataset><dataset seriesName='zER_u' color='00FF00' renderAs='Line' ><set value='0.000000' /><set value='-0.000155' /><set value='-0.006479' /><set value='-0.007280' /><set value='-0.000895' /><set value='0.003701' /><set value='0.005333' /></dataset></chart>" ;
return strXML; }
</script>
<script language="JavaScript">
function UpdatestrXML_2008(){
var chartObj = getChartFromId("chart1Id"); //Get reference to chart object using Dom ID
chartObj.setDataXML(generateXML_2008()); } //Update XML going to Fusion charts
function UpdatestrXML_2009(){
var chartObj = getChartFromId("chart1Id"); //Get reference to chart object using Dom ID
chartObj.setDataXML(generateXML_2009()); } //Update XML going to Fusion charts
function UpdatestrXML_2010(){
var chartObj = getChartFromId("chart1Id"); //Get reference to chart object using Dom ID
chartObj.setDataXML(generateXML_2010()); } //Update XML going to Fusion charts
function UpdatestrXML_2011(){
var chartObj = getChartFromId("chart1Id"); //Get reference to chart object using Dom ID
chartObj.setDataXML(generateXML_2011()); } //Update XML going to Fusion charts
function UpdatestrXML_2012(){
var chartObj = getChartFromId("chart1Id"); //Get reference to chart object using Dom ID
chartObj.setDataXML(generateXML_2012()); } //Update XML going to Fusion charts
function UpdatestrXML_2013(){
var chartObj = getChartFromId("chart1Id"); //Get reference to chart object using Dom ID
chartObj.setDataXML(generateXML_2013()); } //Update XML going to Fusion charts
function UpdatestrXML_2014(){
var chartObj = getChartFromId("chart1Id"); //Get reference to chart object using Dom ID
chartObj.setDataXML(generateXML_2014()); } //Update XML going to Fusion charts
</script>
<script language="JavaScript">
var start = 250 ;
var delay = 350
// var delay = 2000
function Animate() {
t1_2008=setTimeout("javascript:UpdatestrXML_2008();", start+delay*1 ) ;
t1_2009=setTimeout("javascript:UpdatestrXML_2009();", start+delay*2 ) ;
t1_2010=setTimeout("javascript:UpdatestrXML_2010();", start+delay*3 ) ;
t1_2011=setTimeout("javascript:UpdatestrXML_2011();", start+delay*4 ) ;
t1_2012=setTimeout("javascript:UpdatestrXML_2012();", start+delay*5 ) ;
t1_2013=setTimeout("javascript:UpdatestrXML_2013();", start+delay*6 ) ;
t1_2014=setTimeout("javascript:UpdatestrXML_2014();", start+delay*7 ) ;
LOOP =setTimeout("javascript:Animate();", start+delay*8) ; }
</script>
<script language="JavaScript">
function FreezeAll() { clearTimeout(t1_2008); clearTimeout(t1_2009); clearTimeout(t1_2010); clearTimeout(t1_2011); clearTimeout(t1_2012); clearTimeout(t1_2013); clearTimeout(t1_2014); clearTimeout(LOOP); }
</script>
</HEAD>
<body onload="Animate();" >
<FORM NAME='Form1' Id='Form1' action='' method=''>
<INPUT TYPE="button" class="button" value="Animate" onClick="Animate(); ">
<INPUT TYPE="button" class="button" value="Freeze" onClick="FreezeAll();">
</FORM>
<div id="chart1div"> FusionCharts </div>
<script language="JavaScript">
var chart1 = new FusionCharts("MSColumnLine3D.swf", "chart1Id", "600", "400", "0", "1");
chart1.setDataXML("<chart></chart>"); //Initialize chart with empty data. We'll feed it data on the chart's FC_Rendered event.
chart1.render("chart1div");
</script>
</body>
</HTML>
