Google Visualization (PieChart/LineChart) Jquery Ajax Firefox issue

问题

I have run into a bug with firefox and have searched all over and have not seemed to find the answer to an issue I have been having.

My program works great in Chrome and IE, but the iframe charts are not working in firefox.

I'm using a handler and then jquery.ajax to grab at the data and run the script.

jQuery.ajax({
                    url: jQuery(this).attr("href"),
                    data: data,
                    dataType: 'script'
});

data = all the information for a piechart and all the information for a table. The table is fine, but the pie chart iframe is empty. If I hit the backspace button then the piechart will show up. It's almost like the piechart is overshooting in firefox.

the data looks like this except with my own data. This is getting passed from the handler to the ajax call

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Task');
    data.addColumn('number', 'Hours per Day');
    data.addRows(5);
    data.setValue(0, 0, 'Work');
    data.setValue(0, 1, 11);
    data.setValue(1, 0, 'Eat');
    data.setValue(1, 1, 2);
    data.setValue(2, 0, 'Commute');
    data.setValue(2, 1, 2);
    data.setValue(3, 0, 'Watch TV');
    data.setValue(3, 1, 2);
    data.setValue(4, 0, 'Sleep');
    data.setValue(4, 1, 7);

    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, {width: 450, height: 300, title: 'My Daily Activities'});

Has anybody else come across a similar issue? I know the data is passed right and everything is received, but it just seems like Firefox is not playing nice with the iframes.

If anyone has any suggestions or thoughts, that would be great

Thanks

回答1:

Just few hours after I read your post that the problem is only in FF i found the solution. Import JQuery on your page

<script src="../GoogleJs/jquery-1.4.2.min.js" type="text/javascript"></script>

then add a tag

$(document).ready(function () {
      Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

      function EndRequestHandler(sender, args) {
        drawVisualization()
      }

    });

where drawVisualization() is the drawing function. It works like charm...

p.s. thank you for noticing that FF was the problem

回答2:

I had the same problem on FFox only.

I solved wrapping everything in a function and calling it with a small setTimeout

function drawChart() {
  //...
}

setTimeout(drawChart, 200);

回答3:

I had the same Issue with Firefox last week and a combination of both answers worked for me just fine as well. A difference is that I'm using $.load instead of an iframe, so there is no need for me to include jQuery in the pgae fetched by AJAX of course.

In chrome the following worked on the AJAX page:

<script>
    google.setOnLoadCallback(drawChart, true);
</script>

In Firefox this didn't work however, so I simply used:

<script>
    $(document).ready(function() {
        function drawChart() {} // omitted
        drawChart();
    });
</script>

Which worked for me in both Chrome 22 and Firefox 16.0.1

来源：https://stackoverflow.com/questions/3719866/google-visualization-piechart-linechart-jquery-ajax-firefox-issue

标签

firefox

jquery

google-visualization