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

Answer 1

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 2

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