Asynchronous Json request not working with google motion chart

Question

I'm using the following code to request for json file and parsing it

google.load('visualization', '1', {packages: ['controls', "motionchart", "table"]});
google.setOnLoadCallback(function(){
createTable($('#chart_div').width(),400);
})
var jsonData;
$.ajax({
 url: shapingTomorrowDataUrl,
 dataType: "json",
 async: true,
 success: function(data) {
  console.log("Data done");
  jsonData=data;
  createTable($('#chart_div').width(),400);
  }
});

Now I initially used a synchronous call to json file and it worked perfectly. But now my client wants a loader gif to play while the data is being read. Synchronous request caused the gif to hang a lot. But my problem with asynchronous request is that on the first time that the user opens my dashboard, the chart function gets called before the json data is parsed. I changed the code a bit to call the function in the success function and commenting the callbackfunction.

But this causes the following error to pop up:

Uncaught TypeError: Cannot read property 'DataTable' of undefined

in the following line:

var chartData = new google.visualization.DataTable();

So in essence my code only works after the first try i.e I'm guessing after the json file is stored in cache. During the first try, the loader gif keeps playing without ever drawing the chart. Would really appreciate some advice on how to solve it.

i mean, clearly google.visualization is undefined. what does that have to do with json? — Kevin B, Mar 29 '17 at 18:56
I'm getting the undefined error after changing the request to asynchronous and commenting the callback function. — Piyush Korlepara, Mar 29 '17 at 19:06
that's probably because the request is now successful when it wasn't before, and therefore it's now running some other function that's throwing said error. — Kevin B, Mar 29 '17 at 19:25
I have no problems with the request being unsuccessful. My problem is that the function createTable is being called while the json file is being read in the background. Since the file has not been read completely, I'm getting errors — Piyush Korlepara, Mar 29 '17 at 19:29
but... the error you are showing us isn't due to json... it isn't even using it. — Kevin B, Mar 29 '17 at 19:30
I guess my problem is I'm getting a new error because of the way the json file is read. I'm sorry if I used the wrong terminology to describe it — Piyush Korlepara, Mar 29 '17 at 19:39
I think this problem is basically going to boil down to http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call tldr, use callbacks and/or promises properly — Kevin B, Mar 29 '17 at 19:39

score 0 · Accepted Answer · answered Mar 31 '17 at 12:23

wait until the callback is finished before making the $.ajax call...

var jsonData;
google.load('visualization', '1', {packages: ['controls', "motionchart", "table"]});
google.setOnLoadCallback(function(){
  $.ajax({
   url: shapingTomorrowDataUrl,
   dataType: "json",
   async: true,
   success: function(data) {
    console.log("Data done");
    jsonData=data;
    createTable($('#chart_div').width(),400);
    }
  });
});

Asynchronous Json request not working with google motion chart

1 Answers1