在Ajax上加载Google图表-成功

Question

I'm populating Google Chart from an ajax, but it's works only when the ajax's load is fast enough.

And too, i need to keep my data as variable to be used later on re-sizes function and other data managment.

I'm working with the Google chart's tutorial at the moment.

I just added some consoles.log to see where it's fails.

    <script type="text/javascript">

    // Load the Visualization API and the piechart package.
    google.charts.load('current', {'packages':['corechart']});

    // Set a callback to run when the Google Visualization API is loaded.
    //google.charts.setOnLoadCallback(drawChart);
    //Mod

     function drawChart(dataIN) {
      console.log(dataIN);
      if(dataIN == undefined){
        console.log("opt 1")
        console.log(dataIN);
          var jsonData = $.ajax({
            url: "getData.php",
            dataType: "text",
            async: false
              }).responseText;
      }else{
        console.log("opt 2");
        console.log(dataIN);
      }

      // Create our data table out of JSON data loaded from server.
      console.log("data in process")
      var data = new google.visualization.DataTable(dataIN);

      // Instantiate and draw our chart, passing in some options.
      console.log("drawCart")
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, {width: 400, height: 240});
    }

var GAdata = $.ajax({
        url: "getData.php",
        data: "test",
        async: false,
        success: function(resultData){
            google.setOnLoadCallback(drawChart(resultData));
            return resultData;
        }
    }).responseText;
    </script>

the last console log is "data in process".

Any ideas?

Answer 1

Your setOnLoadCallback is backwards. setOnLoadCallback means that the chart component is ready, so you can solve it in 2 ways:

1.  google.setOnLoadCallback(function() { $.ajax({ url: "getData.php", data: "test", success: function(resultData) { drawChart(resultData); return resultData; } }); }; 

Or

2. Have both run async, and if setOnLoadCallback returns before your Ajax result, you do nothing, you make drawChart call from your ajax success, if the ajax call returns before setOnLoadCallback then you store the result in a variable then call drawChart from setOnLoadCallback passing the cached result