Search code examples
jquerygoogle-visualizationjsapi

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 drawGeoChart(){.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
Solution

  • 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?