Chart not working properly with Ajax in Firefox

[nemesis256]

So I've got this function that has ajax code, which calls to a PHP script to build the XML for the chart. The function is run when the page loads, and is called later when the user selects an option from a select menu. Safari and IE are working fine. Firefox on the other hand, only works on the page load. When selecting an option from the select menu, nothing happens. Is this a known issue?

[FusionCharts Support]

Hi,

Could you please try installing Firebub in Firefox to track whether AJAX request is been sent and whether ajax response has been received? This might help you track the issue. Since its working in Safari and IE it seems ok and it should work in Firefox unless some AJAX response handler code is no working.

You could also try alerting the response HTML  to see if AJAX resonse is received in Firefox.

[nemesis256]

I am getting the response back. When I alert it I see the correct XML. It's not being applied to the graph for some reason. But the same function works when the page is initially loaded.

[Pallav]

Can you switch the debug mode of chart to on to see if the method is being invoked on the chart?

[nemesis256]

I turned on debug mode, but I'm not sure what I'm looking for. There's no difference in how the chart behaves in Firefox. It's loaded initially with the debugger on top, and nothing changes when I select another chart from the drop down.

 

 

 

Here's the data from the debugger.

 

 

 

Info: Chart loaded and initialized.

 

Initial Width: 550

 

Initial Height: 350

 

Scale Mode: noScale

 

Debug Mode: Yes

 

Application Message Language: EN

 

Version: 3.0.6

 

Chart Type: Scroll Column 2D Chart

 

Chart Objects:

 

BACKGROUND

 

CANVAS

 

CAPTION

 

SUBCAPTION

 

YAXISNAME

 

XAXISNAME

 

DIVLINES

 

YAXISVALUES

 

HGRID

 

DATALABELS

 

DATAVALUES

 

TRENDLINES

 

TRENDVALUES

 

DATAPLOT

 

TOOLTIP

 

VLINES

 

LEGEND

 

SCROLLPANE

 

 

 

INFO: XML Data provided using dataXML method.

 

XML Data: proper xml data is shown, to long to post here.

[nemesis256]

anyone? I still haven't figured out this Firefox problem.

[Pallav]

The setDataXML method is not being invoked on chart. Else, the debug mode would write something like:

 

 

 

setDataXML method invoked on chart.

 

New data: XML data here...

[tcraigen]

I have done extensive work with AJAX and fusion charts.

 

 

 

 

 

The first tricky part, you need to double escape the string after the url base path.

 

 

 

 

 

function draw_chart(debug) {

 

      var chart = new FusionCharts("/charts/MSStackedColumn2DLineDY.swf", "DynamicChart", "1000", "650",debug, "1");

      query = "/cgi-bin/FusionChart.py?xml=/server/path/to/file/test.xml";

      chart.setDataURL( escape( query) );

      chart.render("fusion_chart");

 

}

 

 

 

You have to create span tag with "fusion_chart" as the id/name for the above code to work.

 

But this is what I have been using to generate the page.

 

 

 

Notice the "1" at the end of the new FusionCharts object.

 

This registers your chart object so you can update it via ajax.

 

 

 

function UpdateChart(type,path,query,w,h,debug) {

 

 

 

// this function will do an update using Ajax, the data is much more reliable

 

// trying to redraw the graph any other way spits back the XML incorrectly

 

try {

 

if(debug == undefined) {

 

debug=0;

 

}

 

 

 

var url = path;

 

var pars = query;

 

var myAjax = new Ajax.Request(

 

url,

 

{

 

method: 'get',

 

asynchronous: 1,

 

parameters: pars ,

 

onSuccess: function(request) {

 

//alert(url);

 

//alert(pars);

 

$('fusion_chart').setAttribute("class","");

 

var req = request.responseText.evalJSON();

 

var chart1 = new FusionCharts(type, "DynamicChart", w, h, debug, "1");

 

//alert(req);

 

chart1.setDataXML( escape(req) );

 

chart1.render("fusion_chart");

 

}});

 

 

 

} catch(e) {

 

alert("ERROR UpdateChart: " + e);

 

}

 

 

 

}

 

 

 

(Can't seem to get the Code tags to work, don't understand why this works on other sites and never really works here)

 

 

 

I think you may need to check the chart object to see if it exists before creating it again.

 

But my experience with the chart object is that its sometimes does not register. I abonded trying to reuse the object and just kept re-creating it everytime I needed a new update.

 

 

 

Another solution I came up with, does not really require ajax, is using an IFRAME with noborder, and update the the SRC to a path so that it draws the chart through a CGI script.

 

 

 

 

 

My py CGI script takes a path, resolves it internally and responds with XML output.

 

If you have lots of arguments, this can get tricky passing data around.

 

But it is important that the path for the XML generation is on the same server the AJAX call is running from.

 

 

 

Also, you can't do cross-domain AJAX calls, they all have to be local to the server running the webpage displaying the data.

 

 

 

Hope this helps,

Edited April 21, 2008 by Guest