web-dev-qa-db-fra.com

L'API Google Charts affiche un écran vide avec la méthode $ (document) .ready

J'ai plusieurs fonctions qui instancient divers graphiques à l'aide de l'API Google Charts.

Lorsque je les appelle sans la méthode $(document).ready de jQuery, tout fonctionne correctement. Mais avec cette méthode, je regarde un écran vide.

Pourquoi?

<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 Voici l'erreur que j'ai dans 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
jquerygoogle-visualizationjsapi
28
Stann

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

est probablement la réponse la plus proche, et la réponse de Ryan Wheale sur ce qui suit peut également être utile.

Puis-je utiliser google.setOnLoadCallback plusieurs fois?

20
digitaljoel

Selon la documentation de visualisation de Google, vous devez charger le (s) package (s) visuel (s) prior (s) à onload ou jquery ready. Je suggère de charger immédiatement après la référence de script jsapi, comme indiqué ci-dessous.

Sinon, vous obtiendrez un 1) Google n'est pas défini (erreur de référence) ou 2) si vous utilisez ajax, éventuellement une réponse vierge et une page vierge sans erreur.

séquence de chargement: (en utilisant 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);
});
14
tibc-dev

Voici le paradigme que j'utilise. Définissez un rappel pour la méthode google.load et n'utilisez pas du tout google.setOnLoadCallback (autant que je sache, cela 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);
}
5
Paul

Bonjour, cette solution ne fonctionne pas pour moi, apparemment (je suppose que je ne suis pas sûr). La bibliothèque Google a des problèmes de portée lorsque vous l'appelez à l'intérieur d'un objet jQuery. La solution est donc assez simple (bien qu'elle ne l'était pas si simple: s) définissez une variable globale et affectez le librari de Google:

var localGoogle = google;

ça a l'air marrant hein:) ... alors utilisez la variable que vous avez définie pour invoquer le setOnCallback, ça a marché pour moi j'espère que ça marchera pour vous ..

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

vous devez appeler https://www.google.com/jsapi au lieu de http://www.google.com/jsapi

bonne chance

0
gounane
            <!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>
0
David Cazares

Pour une solution alternative, vous pouvez utiliser le «chargement automatique» pour inclure les packages que vous souhaitez dans la balise script. Cela annule le besoin de "google.setOnLoadCallback".

voir https://developers.google.com/loader/#AutoLoading pour plus de détails.

Vous pouvez donc tout faire comme d'habitude en tant qu'événement jQuery Document Ready.

Il existe également un assistant qui peut configurer une URL pour vous, mais le lien est actuellement rompu. La voici quand même: http://code.google.com/apis/loader/autoloader-wizard.html

0
bigtallbill

Cela fonctionne pour moi:

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

        }

Démo: jsfiddle

0
Tehila