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

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

When I call them without jQuery's $(document).ready method, everything works fine. But with that method, I'm looking at blank screen.

Why?

<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>
function drawColumnChart1(){..some code..}
function drawColumnChart2(){..some code..}
function drawGeoCh开发者_JAVA技巧art(){.some code..}

//This works fine.
google.load("visualization", "1", {packages:["piechart", "corechart", "geomap"]});
google.setOnLoadCallback(window.drawColumnChart1);
google.setOnLoadCallback(window.drawColumnChart2);
google.setOnLoadCallback(window.drawGeoChart);



//This doesn't work
$(document).ready(function(){
    google.load("visualization", "1", {packages:["piechart", "corechart", "geomap"]});
    google.setOnLoadCallback(window.drawColumnChart1);
    google.setOnLoadCallback(window.drawColumnChart2);
    google.setOnLoadCallback(window.drawGeoChart);
});

UPDATE Here is the error I get in Firebug:

uncaught exception: [Exception... "Could not convert JavaScript argument"  nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)"  location: "JS frame :: http://www.google.com/jsapi :: Q :: line 20"  data: no]
http://www.google.com/jsapi
Line 22

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?

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);
});

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);
}

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);
}

For an alternate solution you can use 'autoloading' to include the packages you want in the script tag. This negates the need for "google.setOnLoadCallback".

see https://developers.google.com/loader/#AutoLoading for details.

So, you can do everything as you would normally from as jquery document ready event.

There is also a wizard that can set up a URL for you, but currently the link is broken. Here it is anyway: http://code.google.com/apis/loader/autoloader-wizard.html

you hav to call https://www.google.com/jsapi instead of http://www.google.com/jsapi

good luck

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

            <!DOCTYPE html>
            <html>
            <head>
            <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
            <script type="text/javascript" src="https://www.google.com/jsapi"></script>
            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
            <script type="text/javascript">

            google.load("visualization", "1", {packages:["corechart"]});
            function drawChart(gtitle,glabel,gwidth,gheight,gtype,gstart,gend,gid) {

                $.ajax({
                        url: "http://localhost/reporte/response.php",
                                type: "GET",
                                dataType: "JSON",
                                cache: false,
                                async: false,
                                data: {start:gstart,end:gend,id:gid},
                                success: function(data) {
                                    var len = 0;
                                    if (data.length)
                                    {
                                    len = data.length;
                                    }

                                    if(len > 0)
                                    {
                                    dataarray = [[gtitle,glabel]];
                                        for (var i = 0; i< len; i++) {
                                            dataarray.push([data[i].label,data[i].value]);
                                        }
                                    }
                                    else if(len==0)
                                    {

                                    }
                                },
                                error:function(data) 
                                {


                                }
                        });

                    var values = new google.visualization.arrayToDataTable(dataarray);
                    var options = {title: gtitle,width:gwidth,height:gheight};

                            switch(gtype){
                                case 'PieChart':
                                    var chart = new google.visualization.PieChart(document.getElementById('chart'));
                                    break;
                                case 'LineChart':
                                    var chart = new google.visualization.LineChart(document.getElementById('chart'));
                                    break;
                                case 'ColumnChart':
                                    var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
                                    break;
                                case 'AreaChart':
                                    var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
                                    break;
                            }

                    chart.draw(values, options);


            }






            $(document).ready(function(){
            //drawChart('Titulo del Grafico','Tickets',800,800,'PieChart',20141001,20141010,'procedure1');
            //drawChart('Titulo del Grafico','Tickets',400,400,'ColumnChart',20141001,20141010,'procedure2');
            //drawChart('Titulo del Grafico','Tickets',400,400,'LineChart',20141001,20141010,'procedure3');
            drawChart('Titulo del Grafico','Tickets',600,400,'AreaChart',20141001,20141010,'procedure4');
            });

            </script>
            </head>
            <body>

            <div id="chart"></div>

            </body>
            </html>

Try to close the call to ready?

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