L'API di Google Charts mostra una schermata vuota con $ (document) .ready method

Ho diverse funzioni che istanziano vari grafici utilizzando l'API di Google Charts.

Quando li chiamo senza il metodo $(document).ready di jQuery, tutto funziona correttamente. Ma con quel metodo, sto guardando lo schermo vuoto.

Perché?

<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 Qui è l'errore che ottengo 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

fonte

2011-03-04 Stann

google.setOnLoadCallback with jQuery $(document).ready(), is it OK to mix?

è probabilmente la risposta più vicina, e la risposta di Ryan Wheale sulla seguente può anche essere utile.

Is it ok to use google.setOnLoadCallback multiple times?

fonte

2011-03-04 18:45:27 digitaljoel

apparentemente $ (document) .ready accade prima che l'oggetto google sia disponibile ed è per questo che google.load fallisce all'interno di $ (document) .ready o qualcosa del genere. Oh bene. – Stann

tenta di chiudere la chiamata a ready?

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

fonte

2011-03-04 18:09:29 Andomar

:) grazie. quello era solo un errore di battitura qui. è chiuso in codice reale. – Stann

qualche altra idea? – Stann

@Andre: No, ma sto guardando per altre risposte! Sembra che Digitaljoel l'abbia inchiodato. – Andomar

Secondo la documentazione di visualizzazione di Google è necessario caricare il pacchetto visivo (s) prima a OnLoad o jQuery pronto. Suggerisco di caricare immediatamente dopo il riferimento allo script jsapi come mostrato di seguito.

Altrimenti si otterrà 1) google non è definito (errore di riferimento) o 2) se si utilizza ajax possibilmente una risposta vuota & pagina vuota senza errori.

sequenza carico: (usando il vostro esempio)

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

fonte

2011-09-19 19:49:05

Hi questa soluzione non ha funzionato per me, a quanto pare (sto cercando di indovinare non sono sicuro) google biblioteca ha alcuni problemi di portata quando si chiama all'interno di un oggetto jQuery, quindi la soluzione è abbastanza semplice (anche se ottenuto non è stato così semplice: s) definisce una variabile globale e assegnare il google librari:

var localGoogle = google;

sembra divertente eh :) .. quindi usa la variabile che hai definito per invoque il se tOnCallback, ha funzionato per me spero che funziona per voi ..

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

fonte

2011-11-17 22:29:52 Ricardo

Per una soluzione alternativa si può usare 'caricamento automatico' per includere i pacchetti desiderati nel tag script. Ciò annulla la necessità di "google.setOnLoadCallback".

vedere https://developers.google.com/loader/#AutoLoading per dettagli.

Quindi, puoi fare tutto come faresti normalmente come evento pronto per jquery.

C'è anche una procedura guidata che può impostare un URL per te, ma attualmente il link è rotto. Eccola comunque: http://code.google.com/apis/loader/autoloader-wizard.html

fonte

2012-02-03 07:42:39 bigtallbill

Ecco il paradigma che sto usando. Imposta un callback per il metodo google.load e non utilizzare affatto google.setOnLoadCallback (AFAIK non è necessario).

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

fonte

2012-11-06 04:02:58 Paul

Questo ha risolto il mio problema con la pagina bianca, grazie! Invece di chiamare 'google.setOnLoadCallback (callback);' Ho aggiunto ''callback': callback' alla chiamata' google.load() '. Pazzesco che funzioni, ma è successo. –

si hav chiamare https://www.google.com/jsapi invece di http://www.google.com/jsapi

buona fortuna

fonte

2014-01-02 17:44:56 gounane

Questo funziona per 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

fonte

2014-09-30 21:26:28 Tehila

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

fonte

2014-10-10 15:23:08

L'API di Google Charts mostra una schermata vuota con $ (document) .ready method

risposta

Problemi correlati