I have been using the code below to make a request for a JSON file and then 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);
}
});
Initially, I used a synchronous call to the JSON file and everything worked perfectly. However, my client now wants a loading gif to be displayed while the data is being fetched. The issue with the synchronous request was that it caused the gif to hang for too long. Switching to an asynchronous request resolved this problem, but introduced another one - the chart function gets called before the JSON data has finished parsing on the first load of the dashboard.
In an attempt to address this, I modified the code to invoke the function within the success callback instead and commented out the callback function.
However, this change resulted in the following error:
Uncaught TypeError: Cannot read property 'DataTable' of undefined
Specifically, the error occurred at this line:
var chartData = new google.visualization.DataTable();
Essentially, my code only functions properly after the initial try, presumably once the JSON file is cached. On the first attempt, the loader gif keeps running without rendering the chart. Any advice on resolving this would be greatly appreciated.