google cartes api et jquery problème

Question

Hé les gars. J'ai vraiment bizarre problème ici Je suis en train d'utiliser google API graphiques. J'ai aussi utiliser jquery. J'ai plusieurs fonctions qui instancient différents graphiques. Donc, lorsque j'ai simplement l'appeler sans jquery $(document).prêt de la méthode tout fonctionne bien. Mais quand j'essaye de charger des tableaux à partir de $(document).prête - je suis en train de regarder l'écran vide... impossible de trouver quel est le problème.

Toutes les suggestions?

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

Mise à JOUR Voici l'erreur que je reçois dans Firebug:

uncaught exception: [Exception... "impossible de convertir le JavaScript argument" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" emplacement: "JS cadre :: http://www.google.com/jsapi :: Q :: ligne 20" de données: aucun] http://www.google.com/jsapi Ligne 22

Answer 1

google.setOnLoadCallback avec jQuery $(document).ready(), est-il OK pour mélanger?

est probablement la réponse la plus exacte, et Ryan Wheale de réponse sur les points suivants peuvent également être utiles.

Est-il possible d'utiliser google.setOnLoadCallback plusieurs fois?

Answer 2

Selon google visualisation documentation dont vous avez besoin pour charger le pack visuel(s) préalable à onload jquery prêt. Je suggère de charger immédiatement après la jsapi référence de script comme indiqué ci-dessous.

Sinon, vous aurez un 1) google n'est pas définie (erreur de référence) ou 2) si l'utilisation d'ajax, éventuellement, d'un vide de réponse & page blanche sans erreur.

chargement de la séquence: (à l'aide de votre exemple)

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

Voici le paradigme que j'utilise. Définir un rappel pour le google.la méthode de chargement, et de ne pas utiliser google.setOnLoadCallback à tous (autant que je sache, ce n'est pas nécessaire).

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 4

Salut, la solution n'a pas fonctionné pour moi, apparemment (je suppose que je ne suis pas sûr) bibliothèque de google a certaines questions de portée lorsque vous appelez à l'intérieur d'un objet jquery, donc la solution est assez simple (bien que se il n'était pas si simple :s) de définir une variable globale et d'attribuer le google librari:

var localGoogle = google;

l'air drôle hein :)... alors utiliser la variable que vous avez défini pour il faut invoquer la setOnCallback, il a travaillé pour moi, j'espère que cela fonctionne pour vous..

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

Answer 5

Essayez de fermer l'appel à ready?

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