Google Charts API and jQuery

Question

I'm beginning to use the Google Charts API and am seeing some curious aspects about its behavior. I first noticed that my sample chart wouldn't load when I placed the google chart code inside of the document.ready of jQuery. So then I played around and did the following:

  google.load('visualization', '1.0', { 'packages': ['corechart'] });

        //jquery part
            $(document).ready(function () {
                google.setOnLoadCallback(drawStuff);
                function drawStuff() {
                    var data = new google.visualization.DataTable();
                    data.addColumn('string', 'Topping');
                    data.addColumn('number', 'Slices');
                    data.addRows([
                    ['Mushrooms', 3],
                    ['Onion', 1],
                    ['Olives', 1],
                    ['Zucchini', 3],
                    ['Pepperoni', 2]
                ]);
                    //set the chart options
                    var options = {
                        title: 'Pizza Consumed',
                        width: 400,
                        height: 500
                    };
                    //instantiate and draw our chart, passing in the options
                    var chart = new google.visualization.ColumnChart(document.querySelector('#chart'));
                    chart.draw(data, options);
                    $('#chart').fadeIn();
                };
            });

This works as I hoped it would but when I open up developer tools I see that the GET request for google.com/jsapi apparently failed (indicated by the red X in Chrome dev tools). The chart certainly comes up on the page and works as I would expect it would, however. Why does this current iteration work whereas placing everything inside of the document.ready does not? If I wanted to use Google charts on a project along with jQuery would this be a viable method of doing so?

asgallant asgallant · Accepted Answer · 2013-10-29T16:20:40

There is no need to put the chart code inside a document ready call - in fact, you are more likely to encounter problems doing that than you are if you just leave it on its own:

function drawStuff() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
        ['Mushrooms', 3],
        ['Onion', 1],
        ['Olives', 1],
        ['Zucchini', 3],
        ['Pepperoni', 2]
    ]);
    //set the chart options
    var options = {
        title: 'Pizza Consumed',
        width: 400,
        height: 500
    };
    //instantiate and draw our chart, passing in the options
    var chart = new google.visualization.ColumnChart(document.querySelector('#chart'));
    chart.draw(data, options);
}
google.load('visualization', '1.0', { 'packages': ['corechart'], callback: drawStuff });

$(document).ready(function () {
    // do stuff on "ready" event
});

On another note, I see you are calling $('#chart').fadeIn(); after drawing the chart. I presume that this means that chart is hidden prior to drawing, which can cause problems in some browsers. The recommended course of action is to unhide the div prior to drawing and hide it again immediately after drawing (from a "ready" event handler). You can then call the fadeIn effect:

$('#chart').show();
var chart = new google.visualization.ColumnChart(document.querySelector('#chart'));
google.visualization.events.addListener(chart, 'ready', function () {
    $('#chart').hide();
    $('#chart').fadeIn();
});
chart.draw(data, options);

Google Charts API and jQuery

1 Answers