setDataXML is not doing anything

[jtnjtnjtn]

I've based my code on one of the examples provided to dynamically change the graph based on user input. When I hit the calculate buttn the graph is redisplayed but the XML hasn't changed. Why would this be?

 

 

 

 

 

[head]

 

[script language=JavaScript" src="../FusionCharts/FusionCharts.js][/script]

 

[sCRIPT LANGUAGE=JavaScript]

 

 

 

//Flag indicating whether our chart has loaded

 

var chartLoaded = false;

 

 

 

function FC_Rendered(domId){

 

//It is in this method that you can update chart's data using JS methods.

 

//Check if this is the chart that we want to update

 

if (domId=="chart1Id"){

 

//Yes - it is.

 

 

 

//Enable the form now, as the chart has loaded

 

this.document.interestCalculator.disabled = false;

 

 

 

//Set chartLoaded flag to true

 

chartLoaded = true;

 

 

 

//Get reference to chart object using Dom ID

 

var chartObj = getChartFromId(domId);

 

//Update it's XML - set animate Flag to true

 

chartObj.setDataXML(generateXML());

 

}

 

return true;

 

}

 

 

 

function updateChart(domId){

 

//Update only if chart has loaded

 

//this.document.write("chartLoaded" + chartLoaded);

 

if (chartLoaded){

 

//Get reference to chart object using Dom ID

 

var chartObj = getChartFromId(domId);

 

 

 

//Update it's XML

 

chartObj.setDataXML(generateXML());

 

}

 

}

 

 

 

function generateXML(){

 

//Variable to store XML

 

var strXML;

 

 

 

strXML = "[chart rotateValues=1' placeValuesInside='1' showYAxisValues='0' showLegend='0' useRoundEdges='1' formatnumberscale='0' caption='Interest Saving' decimalprecision='0' palette='2]";

 

strXML = strXML + "[categories] [category label='Interest over life of loan' /][/categories]";

 

 

 

//Based on the products for which we've to generate data, generate XML

 

//strXML = strXML + "[dataset SeriesName=Current][set value='" + calculateInterest(this.document.interestCalculator.LoanAmount.Value, this.document.interestCalculator.CurrentRate.Value) + "' /][/dataset]";

 

//strXML = strXML + "[dataset SeriesName=Desired][set value='" + calculateInterest(this.document.interestCalculator.LoanAmount.Value, this.document.interestCalculator.NewRate.Value) + "' /][/dataset][/chart]";

 

strXML = strXML + "[dataset SeriesName=Current' Color='FF0000][set value='2000' /][/dataset]";

 

strXML = strXML + "[dataset SeriesName=Desired' Color='0000FF][set value='1000' /][/dataset]";

 

 

 

//Close [chart] element;

 

strXML = strXML + "[/chart]";

 

//Return data

 

return strXML;

 

}

 

 

 

function calculateInterest (loanAmount, rate)

 

{

 

var interestXML;

 

 

 

interestXML = (loanAmount * (360 / (1 - (1 + Math.pow((rate/1200), -360)))) * 360 - loanAmount;

 

 

 

//Return

 

return "1000";//interestXML;

 

}

 

 

 

[/sCRIPT]

 

[/head]

 

[body bgcolor=#ffffff]

 

 

 

[FORM NAME='interestCalculator' Id='interestCalculator' action='Chart.html' method='POST' disabled]

 

Please select the products for which you want to plot the chart:

 

 

 

[iNPUT TYPE=Text' name='LoanAmount]Loan Amount

 

[iNPUT TYPE=Text' name='CurrentRate]Current Rate

 

[iNPUT TYPE=Text' name='NewRate]New Rate

 

[bUTTON NAME=submit onclick=updateChart('chart1Id')]Calculate[/bUTTON]

 

[/FORM]

 

 

 

[!-- Start Code for FusionCharts chart --]

 

[div id=chartdiv" align="center]FusionCharts[/div]

 

[script type=text/javascript]

 

var myChart = new FusionCharts("../FusionCharts/MSColumn3D.swf", "chart1Id", "450", "300", "1", "1");

 

[!-- myChart.setDataURL("Data.xml"); --]

 

myChart.setDataXML("[chart rotateValues=1' placeValuesInside='1' showYAxisValues='0' showLegend='0' useRoundEdges='1' yAxisMaxValue='10000' formatnumberscale='0' caption='Interest Saving' numberprefix='$' decimalprecision='0' palette='2' showvalues='0] [categories] [category label='Interest over life of loan' /][/categories][dataset SeriesName=Current' Color='FF0000][set value='0' /][/dataset][dataset SeriesName=Desired' Color='0000FF][set value='0' /][/dataset][/chart]");

 

myChart.render("chartdiv");

 

[/script]

 

[!-- End Code for FusionCharts chart --]

 

[/body]

 

[/html]

[Pallav]

Try switching the debug mode of chart to on - that'll help you with the data identification process.

[jtnjtnjtn]

Thanks. I have already switched the debug mode on and it verifies that the XML data is not changing.

 

 

 

Here is the debug data after the initial load:

 

 

 

Info: Chart loaded and initialized.

 

Initial Width: 450

 

Initial Height: 300

 

Scale Mode: noScale

 

Debug Mode: Yes

 

Application Message Language: EN

 

Version: 3.0.4

 

Chart Type: Multi Series 3D Column Chart

 

Chart Objects:

 

BACKGROUND

 

CANVAS

 

CAPTION

 

SUBCAPTION

 

YAXISNAME

 

XAXISNAME

 

DIVLINES

 

YAXISVALUES

 

DATALABELS

 

DATAVALUES

 

TRENDLINES

 

TRENDVALUES

 

DATAPLOT

 

TOOLTIP

 

VLINES

 

LEGEND

 

 

 

INFO: Chart registered with external script. DOM Id of chart is chart1Id

 

INFO: XML Data provided using dataXML method.

 

XML Data: [chart rotateValues=1" placeValuesInside="1" showYAxisValues="0" showLegend="0" useRoundEdges="1" yAxisMaxValue="10000" formatnumberscale="0" caption="Interest Saving" numberprefix="$" decimalprecision="0" palette="2" showvalues="0] [categories] [category label="Interest over life of loan" /][/categories][dataset SeriesName=Current" Color="FF0000][set value="0" /][/dataset][dataset SeriesName=Desired" Color="0000FF][set value="0" /][/dataset][/chart]

 

 

 

 

 

Here is the debug data after entering values and clicking the Calculate button.

 

 

 

Info: Chart loaded and initialized.

 

Initial Width: 450

 

Initial Height: 300

 

Scale Mode: noScale

 

Debug Mode: Yes

 

Application Message Language: EN

 

Version: 3.0.4

 

Chart Type: Multi Series 3D Column Chart

 

Chart Objects:

 

BACKGROUND

 

CANVAS

 

CAPTION

 

SUBCAPTION

 

YAXISNAME

 

XAXISNAME

 

DIVLINES

 

YAXISVALUES

 

DATALABELS

 

DATAVALUES

 

TRENDLINES

 

TRENDVALUES

 

DATAPLOT

 

TOOLTIP

 

VLINES

 

LEGEND

 

 

 

INFO: Chart registered with external script. DOM Id of chart is chart1Id

 

INFO: XML Data provided using dataXML method.

 

XML Data: [chart rotateValues=1" placeValuesInside="1" showYAxisValues="0" showLegend="0" useRoundEdges="1" yAxisMaxValue="10000" formatnumberscale="0" caption="Interest Saving" numberprefix="$" decimalprecision="0" palette="2" showvalues="0] [categories] [category label="Interest over life of loan" /][/categories][dataset SeriesName=Current" Color="FF0000][set value="0" /][/dataset][dataset SeriesName=Desired" Color="0000FF][set value="0" /][/dataset][/chart]

 

 

 

 

 

As you can see nothing has changed.

Edited September 11, 2007 by Guest

[FusionCharts Support]

hi,

 

 

 

after going through your code what i find are :

 

 

 

1. You have some syntax error in function calculateInterest().Disable the line starting with "interestXML ="

 

 

 

2. Do not use "chartObj.setDataXML(generateXML());" in FC_Rendered() function as it will never show the initial chart. use this line only in UpdateChart() function.

 

 

 

3. use have used HTML tag button [bUTTON name=submit onclick=updateChart('chart1Id')]

 

 

 

You must define the type type="button" so that the HTML will look like this :

 

[bUTTON type=button" onclick="updateChart('chart1Id')]

 

 

 

Do not make it submit because we are not submitting to any server script. Its client side java script.

 

 

 

 

 

Things will work now.