Load Google Visualization API After Page Load

Question

I am using Google Visualization API to create tables on a page. These tables get their data from queries which take a lot of time. Since Google Visualization's default behavior is to call the API to draw the chart in the header, it slows down the page load time.

I want to load the page with temporary 'loading' images, and then execute the script after the page fully loads so that the page feels more responsive. Is there any way to do this?

I've tried using jQuery(window).load but that didn't work.

**UPDATE: Paging the table looks like a temporary solution to this problem (e.g table.draw(data, {page: 'enable' ,pageSize: 100})), it's defiantly not stable solution but it's something, the problem is that it solves this problem for tables but not graphs, so I will continue my updates

score 0 · Answer 1 · answered Feb 20 '13 at 04:47

0

Create a <div> element with your 'loading' image on top of the <div> you have the chart in. Display this when the page loads (which will show 'loading' as the default when you start up the page).

Using the ready event of the Table Chart, you create a listener that will trigger when the table is ready for use. In that event, you create a function that hides the 'loading' image's <div> with CSS so it doesn't show anymore.

See an example here. Code as follows:

google.load('visualization', '1', {packages: ['table']});
google.setOnLoadCallback(drawVisualization);

function drawVisualization() {
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn('string', 'Label');
    dataTable.addColumn('number', 'foo');
    dataTable.addColumn('number', 'bar');
    dataTable.addColumn('number', 'caz');
    dataTable.addColumn('number', 'cad');
    for (var i = 0; i < 500; ++i) {
        dataTable.addRow(['Label ' + i, Math.random()*100, Math.random()*100, Math.random()*100, Math.random()*100])
    }

    var table1 = new google.visualization.Table(document.getElementById('table'));

    google.visualization.events.addListener(table1, 'ready', function() {
        document.getElementById('loading').style.display='none';
        alert("Chart is Ready!");
    });

    table1.draw(dataTable, null);


}

answered Feb 20 '13 at 04:47

jmac

7,078
2
29
57

Thank you for the answer, but it isn't solving my problems. I'm trying to load the page and only after that to load the table. I tried also jQuery(window).load but it didnt work also.... thank you again for your effort. Do you have maybe another suggestion? – Octo Feb 28 '13 at 22:25
What doesn't work with my solution? The example I give shows "loading" as the page loads in a `
`. Once the chart is finished rendering, the loading is hidden. See [my example](http://jsfiddle.net/heZUE/1/) again. I even put a pause to make it more obvious. What isn't working with this? You need to be more descriptive if you want help...
– jmac Feb 28 '13 at 23:32
Hey jmac, thank you for the quick response, my problem is that since the query itself is long the page takes long time to load, on your example the page is trying to load the table while it loads other elements as well, so it's really slow still, I wish to have the page load without the table first and only after all the other elements in the page were loaded I wish to start the script, as I said I tried jQuery(window).load but it didn't work. – Octo Feb 28 '13 at 23:43
You could try looking at similar questions like [this](http://stackoverflow.com/questions/556406/google-setonloadcallback-with-jquery-document-ready-is-it-ok-to-mix) or [this](http://stackoverflow.com/questions/807878/javascript-that-executes-after-page-load). Google also has information on the loader [here](https://developers.google.com/loader/#Dynamic). So you can call it from the body onload if you'd like. Look at the above questions and let us know what works. – jmac Feb 28 '13 at 23:54

score 0 · Answer 2 · answered Feb 25 '16 at 19:56

The solution is simple. Call your chart rendering function as a callback in google.load.

For example, change this:

  $(document).ready(function() {
      google.load("visualization", "1", {packages:["corechart"]});
  });

To this:

  $(document).ready(function() {
     google.load("visualization", "1", {packages:["corechart"],"callback":chartRender});
  });

Load Google Visualization API After Page Load

2 Answers2