google.setOnLoadCallback with parameter inside jqu

Question

Sample code: Both of these seem to work ok, to display a message:

google.load("visualization", "1", { packages: ["corechart"] });
...
$(document).ready(function () {

  google.setOnLoadCallback(function () {
    alert('from inside ready 1');
  });
});

$(document).ready(function () {

  google.setOnLoadCallback(alert('from inside ready 2'));
});

Note: I'm using alert(..) just for debugging purposes - my real code draws charts. Now, I want to use these techniques inside $.ajax e.g. :

  $.ajax({
    type: "POST",
    ... 
    success: function (result) {
      if (result.d) {

        $(document).ready(function () {
          alert('sucess');

          // option 1
          google.setOnLoadCallback(function () {
            alert('from inside ready 3');
          });

          // option 2
          // google.setOnLoadCallback(alert('from inside ready 4'));
        });

Now, on ajax success, I can see "sucess" shown, but option 1 doesn't seem to work. i.e. I don't see "from inside ready 3". If I enable the code at option 2, and comment out the code for option 1, I DO see "from inside ready 4".

So it seems that option 2 works, but not option 1, from a jquery ajax call. Can anyone shed some light? Is option 2 100% safe to use? It seems to work, but all the examples I've seen seem to use option 1.

Answer 1

first, you're using the old version of google charts,
the jsapi library should no longer be used,
see the release notes...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader.js from now on.

old: <script src="https://www.google.com/jsapi"></script>

current: <script src="https://www.gstatic.com/charts/loader.js"></script>

this will only change the load statement...

from...

google.load("visualization", "1", { packages: ["corechart"] });

to...

google.charts.load("current", { packages: ["corechart"] });

---

next, you don't need to use the callback every time you need to draw a chart,
it only needs to be used once, to ensure google charts has been loaded.

and there are several ways to use the callback,
you can use the updated setOnLoadCallback function.

google.charts.setOnLoadCallback(drawChart);

or you can place the callback directly in the load statement.

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

or what I prefer, the promise it returns. (google includes a promise polyfill for IE)

google.charts.load('current', {
  packages: ['corechart']
}).then(drawChart);

---

now to the question at hand,
google's load statement will wait for the document to load by default,
so you can use google.charts.load in place of $(document).ready

recommend loading google first, then using ajax to get data, then draw your charts.

something similar to the following setup...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {

  // get data for chart 1
  $.ajax({
    type: 'POST',
    ...
  }).done(function (result) {

    drawChart1(result.d);

  }).fail(function (jqXHR, status, errorThrown) {
    console.log(errorThrown);
  });

  // get data for chart 2
  $.ajax({
    type: 'POST',
    ...
  }).done(function (result) {

    drawChart2(result.d);

  }).fail(function (jqXHR, status, errorThrown) {
    console.log(errorThrown);
  });

});

function drawChart1(chartData) {
  ...
}

function drawChart2(chartData) {
  ...
}