wrandobu wrandobu - 1 month ago 4x
Javascript Question

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 this code in to allow some time for the charts to load, but sometimes the charts take longer than expected and my code breaks. Is there an initializer function in javascript that I can use?

setTimeout(function() {
map.setView([gon.locations[3].latitude, gon.locations[3].longitude - .01],15);
if(typeof lastMarker !== "undefined")
$('progress').animate({value: gon.locations[3].overall_vulnerability}, {duration: 1000});
var markers = L.mapbox.featureLayer().setGeoJSON(getData(gon.locations[3])).addTo(map);
lastMarker = markers;
}, 1500);


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.