google.setOnLoadCallback does not work/does not wait until anything is loaded

Question

That's pretty much it, the call seems to do absolutely nothing.

If I debug the page in Chrome, put a breakpoint right after the call to

google.load('visualization', '1.0', { packages: ['corechart', 'bar', 'table'] });

and literally wait 5-10 seconds for the loading to finish, then proceed, it is fine. Otherwise, if I let 'setOnLoadCallback' try to do it's thing, it will throw

'Uncaught TypeError: Cannot read property 'DataTable' of undefined'

The error is thrown on:

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

Edit:

I should also note that in all examples I've found, when calling

google.setOnLoadCallback(drawChart);

All the examples are as above, without including the brackets '()' at the end of the function, i.e.

google.setOnLoadCallback(drawChart());

However, the only way it actually works for me, is WITH the brackets, yet there are no examples where people include the brackets.

Answer 1

google.setOnLoadCallback(drawChart()) (with paranthesis) should not work at all, so that sounds a little bit strange. setOnLoadCallback expects the name of a function it can call, not the execution of a function.

setOnLoadCallback is a general google feature. It is also triggered by google.load("jquery", "1.9.1") etc. It could be the case that somewhere in your code another library is loaded by google.load() and by that triggering your setOnLoadCallBack prematurely.

So to be absolutely certain that your callback is actually triggered when the visualization library is loaded, and not by something else, you can set the callback directly on load() instead of relying on setOnLoadCallback() :

google.load('visualization', '1.0', 
     { packages: ['corechart', 'bar', 'table'], callback: drawChart });