Google Charts API shows blank screen with $(document).ready method

Question

I\'ve got several functions that instantiate various charts using Google Charts API.

When I call them without jQuery\'s $(document).ready method, everything

Answer 1

According to the google visualization documentation you need to load the visual package(s) prior to onload or jquery ready. I would suggest loading immediately after the jsapi script reference as shown below.

Otherwise you will get a 1) google is not defined (reference error) or 2) if using ajax possibly a blank response & blank page with no errors.

load sequence: (using your example)

<script type="text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js" charset="utf-8"></script>
<script type="text/javascript" src = "http://www.google.com/jsapi" charset="utf-8"></script>
<script type="text/javascript">
    google.load("visualization", "1", {packages:["piechart", "corechart", "geomap"]});
</script>

$(document).ready(function(){
    google.setOnLoadCallback(window.drawColumnChart1);
    google.setOnLoadCallback(window.drawColumnChart2);
    google.setOnLoadCallback(window.drawGeoChart);
});

Answer 2

Here is the paradigm I am using. Set a callback for the google.load method, and don't use the google.setOnLoadCallback at all (AFAIK this is not needed).

MyChart.prototype.render = function() {
    var self = this;
    google.load("visualization", 
                "1", 
                { callback: function() { self.visualize(); }, 
                  packages: ["corechart"] }
               );
}

MyChart.prototype.visualize = function() {

    var data = google.visualization.arrayToDataTable(
    [
        ['Year', 'Sales', 'Expenses'],  
        ['2004',  1000,      400],
        ['2005',  1170,      460],
        ['2006',  660,       1120],
        ['2007',  1030,      540]   
    ]);

    var options = {
        title: 'Company Performance',
        hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
    };

    var chart = new google.visualization.ColumnChart(document.getElementById("mychart_div"));    
    chart.draw(data, options);
}

Answer 3

google.setOnLoadCallback with jQuery $(document).ready(), is it OK to mix?

is probably the closest answer, and Ryan Wheale's answer on the following may also be helpful.

Is it ok to use google.setOnLoadCallback multiple times?

Answer 4

This works for me:

google.load("visualization", "1", {packages:["corechart"],   
        callback:function(){drawChart();}});
        //google.setOnLoadCallback(drawChart);
        function drawChart() {
        console.log("enter draw");
              var data = google.visualization.arrayToDataTable([
   ['Year', 'value', { role: 'style' } ],
   ['2010', 10, ' color: gray'],
   ['2010', 200, 'color: #76A7FA'],
   ['2020', 16, 'opacity: 0.2'],
   ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
   ['2040', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8;  
     fill-color: #BC5679; fill-opacity: 0.2']
   ]);
              var view = new google.visualization.DataView(data);

              var options = {
                title: 'Company Performance',
                tooltip: {isHtml: false},
                legend: 'none',
              };

              var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

              chart.draw(view, options);

        }

Demo: jsfiddle

Answer 5

Try to close the call to ready?

$(document).ready(function(){
    ...
});
^^^

Answer 6

Hi that solution doesn't worked for me, apparently (i'm guessing i'm not sure) google library has some scope issues when you call it inside a jquery object, so the solution is quite simple (although got it wasn't so simple :s) define a global variable and assign the google librari:

var localGoogle = google;

looks funny huh :)... then use the variable you defined to invoque the setOnCallback, it worked for me i hope it work for you..

$(document).ready(function(){
    localGoogle.setOnLoadCallback(window.drawColumnChart1);
}