Google Visualization (PieChart / LineChart) JQuery Ajax Firefox Problem

Question

I ran into an error with firefox and searched everything and did not find the answer to the question that I had.

My program works fine in Chrome and IE, but iframe diagrams don't work in firefox.

I use a handler and then jquery.ajax to grab the data and run the script.

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

data = all information for piechart and all information for the table. The table is perfect, but the iframe pie chart is empty. If I press the backspace button, a picast will appear. This is almost the same as piechart - overshoot in firefox.

the data looks like except for my own data. This is 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'});

- ? , , , , Firefox iframes.

- ,

Answer 1

, , FF, . JQuery

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

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

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

    });

drawVisualization() - . ...

p.s. , FF

Answer 2

FFox.

setTimeout

function drawChart() {
  //...
}

setTimeout(drawChart, 200);

Answer 3

I had the same issue with Firefox last week and the combination of both answers worked just fine for me. The difference is that I use $ .load instead of an iframe, so I don't need to include jQuery in the pgae selected by AJAX, of course.

In chrome, the AJAX page worked:

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

In Firefox, this did not work, so I just used:

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

Which worked for me in both Chrome 22 and Firefox 16.0.1.