Multiple Google Charts on one page - Loading Library efficiently?

Question

I've seen MANY people ask about having multiple Google Charts on one page, and the answer is always "your html/js is wrong", or "just add all of them in one function that's called in the setOnLoadCallback".

My issue is a bit different. What if I want buttons, client side, that, when clicked, generate a Google Chart. Do I need to call "google.load(....)" every time, and then setOnLoadCallback as well, or is there some way to load it ONCE, and then from that point forward just use the already loaded objects?

The only thing I can think of is to store some flag that's updated on the very first google.setOnLoadCallback, and if flag is set, don't load it again, but if someone clicks a few buttons quickly they will all already have issued "load" function calls.

Basically I want one generic function that I can call (I will create it myself) but I don't want the function calling google.load everytime, it just feels really inefficient.

How do I go about this efficiently?

Stéphane Bruckert · Accepted Answer · 2014-11-03T15:24:42.170

1

google.load should indeed be called only once per page load. You don't have to put all your charts into one function, you can create several functions and call them whenever you want, as following:

google.load('visualization', '1.1', {
    packages: ['corechart', 'controls'],
    language: 'en'
});

function drawFirstVisualizations() {
    chart1 = new google.visualization.ChartWrapper({
        'chartType': 'LineChart',
    });

    chart2 = new google.visualization.ChartWrapper({
        'chartType': 'LineChart',
    });

    chart1.draw();
    chart2.draw();
}

function drawSecondVisualizations() {
    chart3 = new google.visualization.ChartWrapper({
        'chartType': 'LineChart',
    });

    chart4 = new google.visualization.ChartWrapper({
        'chartType': 'LineChart',
    });

    chart3.draw();
    chart4.draw();
}

google.setOnLoadCallback(drawFirstVisualizations);

function functionBeingCalledLater() {
    google.setOnLoadCallback(drawSecondVisualizations);
}

edited Nov 03 '14 at 15:24

answered Nov 03 '14 at 14:45

Stéphane Bruckert

21,706
14
92
130

But wouldn't setOnLoadCallback only be called once per ".load" call, i.e. once it loads? – Shalom Slavin Nov 03 '14 at 14:59
No, you can call it whenever you want. Don't be disturbed by the term `OnLoad` in `setOnLoadCallback`. The most important term is `Callback`. `In computer programming, a callback is a piece of executable code that is passed as an argument to other code, which is expected to call back (execute) the argument at some convenient time. The invocation may be immediate as in a synchronous callback or it might happen at later time, as in an asynchronous callback.` Please also read [Use google.setOnLoadCallback multiple times?](http://stackoverflow.com/q/1380043/1515819). – Stéphane Bruckert Nov 03 '14 at 15:05
Ah ok, that was the part I am missing. I thought it was only calling the callback once, kind of like saying "onclick=myFunction()" which will only get clicked once per call, I thought this gets called once per LOAD, but I'll try this and see what happens. – Shalom Slavin Nov 03 '14 at 15:24

Multiple Google Charts on one page - Loading Library efficiently?

1 Answers1