How Do I Ensure That I Load My Charts Before I Use Them?

I want to load my google charts before I i run the rest of my javascript. $(document).ready(function() { google.charts.load('current', {packages:['corechart']}); I originally put

Solution 1:

That is what the setOnLoadCallback() function is for - it runs when the loading is finished.

google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(function() {
    // Everything you want to happen after loading goes here
});

From the documentation:

Before you can use any of the packages loaded by google.charts.load you have to wait for the loading to finish. It is not enough to just wait for the document to finish loading. Since it can take some time before this loading is finished, you need to register a callback function.

Solution 2:

you can also include the callback in the load statement...

google.charts.load("current", {
  callback: function () {
    // google.charts and google.visualization now available
  },
  packages:["corechart"]
});

or use the promise the load statement returns

google.charts.load("current", {
  packages:["corechart"]
}).then(function () {
  // google.charts and google.visualization now available
});