Trouble With Setxmldata

[rubytuby]

Hello,

 

I'm having some trouble getting a chart to update its XML by using the setXMLData function in Javascript. Any help would be greatly appreciated!!

 

I'm initializing a chart on load with this: (The chart loads just fine)

<script type="text/javascript">	
theChart = new FusionCharts( "FusionCharts_evaluation/charts/MSColumn2D.swf", "ChartId", "700", "600", "0", "1", "#DCD8EB" );

theChart.configure("ChartNoDataText", "No data yet. Please select options from above to display a chart");
theChart.setXMLUrl("data.xml");
theChart.render("chartContainer");
</script>

 

There are some selectors at the top of the page that submits (via jQuery ajax) to a service that will send back new XML for a new chart. Here is the code that grabs the new XML and tries to update the chart:

<script type="text/javascript"> 	
$("#chart_form").submit(function(event) {
	event.preventDefault(); 

	$form_data = $(this).serialize();		

	$.ajax({
		type: 'POST'
		,url: '<cfoutput>#REQUEST.site_prefix#</cfoutput>/charting.cfc'
		,data: {method: 'initChart'
				,data: $form_data}
		,dataType: 'xml'
		,success: function(data) {
			theChart.setXMLData(data);
		}
	});
});
</script>

 

I've tested the XML that the service returns and it's fine. This code will actually crash FireFox (I think it's because of FireBug). It will do nothing in IE or in Chrome.

 

Any advice? Is the XML nested somewhere within the 'data' object or something?

 

 

Thanks,

Dan

[rubytuby]

More debugging info:

Since it was crashing in Firefox, I didn't have any error info. Tried in Chrome with Developer Tools running and I get the following errors when I run the code from the original post:

 

Error 1:

Uncaught RangeError: Maximum call stack size exceeded
__flash__toXML
__flash__objectToXML
__flash__toXML
__flash__objectToXML
__flash__toXML
__flash__objectToXML
..
..

 

Error 2:

Uncaught Error: Error calling method on NPObject. (FusionCharts.js:101)
a.renderer.register.update
a.renderer.update
a.extend.setChartData
a.addDataHandler.e.(anonymous function)
$.ajax.success
f.Callbacks.o
f.Callbacks.p.fireWith
w
f.support.ajax.f.ajaxTransport.send.d

 

 

Hope this is helpful.

 

Also, it's worth mentioning that I've also tried using the FusionCharts jQuery plugin to achieve the same thing and got the same errors.

 

 

Dan

[rubytuby]

Thought it might be useful to post XML that the web service is returning. I've put this XML in a static XML file and FusionCharts displays it properly. (I left formatting as-is)

 

<?xml version="1.0" encoding="UTF-8"?> <chart caption="Stuff" showValues="1" xAxisName="Conditions" yAxisName="Percent"><categories><category label="Comparison Group"/><category label="Any other PHAC neuro/Stroke"/><category label="Parkinsons"/><category label="Huntingtons"/><category label="MS"/><category label="Epilepsy"/><category label="ADRD"/><category label="TBI"/><category label="SCI"/><category label="ALS"/><category label="MD"/><category label="CP"/></categories><dataset seriesName="0"><set value="61.4"/><set value="20.0"/><set value="25.6"/><set value="10.9"/><set value="52.6"/><set value="27.8"/><set value="1.9"/><set value="22.8"/><set value="81.6"/><set value="56.8"/><set value="71.3"/><set value="33.6"/></dataset><dataset seriesName="1--2"><set value="34.9"/><set value="50.4"/><set value="53.0"/><set value="59.2"/><set value="40.4"/><set value="47.5"/><set value="50.8"/><set value="55.3"/><set value="18.4"/><set value="35.4"/><set value="25.3"/><set value="32.7"/></dataset><dataset seriesName="3--4"><set value="2.6"/><set value="18.3"/><set value="12.7"/><set value="19.4"/><set value="4.1"/><set value="11.3"/><set value="28.9"/><set value="13.8"/><set value="0.0"/><set value="5.9"/><set value="2.2"/><set value="11.2"/></dataset><dataset seriesName="5--6"><set value="1.1"/><set value="11.3"/><set value="8.7"/><set value="10.6"/><set value="2.8"/><set value="13.4"/><set value="18.4"/><set value="8.1"/><set value="0.0"/><set value="1.9"/><set value="1.3"/><set value="22.6"/></dataset></chart>

 

Just to be clear, I'm getting errors when the jQuery code get to:

theChart.setXMLData(data);

 

Edited March 25, 2012 by rubytuby

[rubytuby]

Sorry for all the bumps... I really need help with this.

 

Here's a URL to test it out. Select something from the two drop-downs and the check boxes, then click Plot:

 

http://hexagondream.com/ipnc/chart.cfm

[Guest Sumedh]

Hi,

 

Could you please try to add chart reference in your code?

 

Create a chart reference using FusionCharts object and call "setXMLData" method using the chart reference.

 

Ref. Code:

var charReference=new FusionCharts("chartId");

chartReferecnce.setXMLData(data);

 

If this does not help, feel free to revert.

[rubytuby]

Thanks for the reply!

 

I've added:

 

		var chartReference = new FusionCharts("myChartId");
		chartReference.setXMLData(data);
		chartReference.render("chartContainer");

 

which causes the chart to give the error: "Chart type not supported". Any other suggestions? The XML that's being returned is valid and will plot properly if I put it in a static XML file. You can see this if you test it at: http://hexagondream.com/ipnc/chart.cfm

 

 

Thanks,

Dan

[Guest Sumedh]

Hi,

 

It seems you are rendering the chart in pure JavaScript (after updating the data).

 

Please note, you would need to add following js files for JavaScript rendering:

> FusionCharts.js

> FusionCharts.HC.js

> FusionCharts.HC.Charts.js

> jquery.min.js

 

Add all the above .js files into your project and keep them in the same folder.

 

Hope this helps.

[rubytuby]

Thanks for helping me with this. I haven't tried it out because I ditched using AJAX and now use a typical form submit to grab the xml (due to time constraints). Hopefully this thread will be helpful to the next person who had the problem I was having.

[Guest Sumedh]

Hi,

 

I am glad, that your issue is resolved.