Question

I was having problems with the DOM since elemnets inside of google visualization tables/graphs were loaded before jQuery.
Therefore, i realized that i need to load google visualization before jQuery .ready()..

Loading Google visualization is done by:

google.load("visualization", "1", {packages:["linechart","table","piechart"]});
google.setOnLoadCallback(drawGraph);

How can I make sure Google visualizaion is loaded BEFORE running the .ready() function?

Thanks,
Joel

Answer 1

You can define document.ready inside a function and it’ll fire when called if it’s already ready, like this:

google.load("visualization", "1", {packages:["linechart","table","piechart"]});
google.setOnLoadCallback(myLoad);

function myLoad() {
  drawGraph();
  $(document).ready(function() {
   //Stuff here
  });
}

It should be noted here though, you might not need document.ready at all, you could just stick the contents in this same function.

Alternatively, you could stick the drawGraph(); call as the first thing in your .ready().