Google Charts API muestra una pantalla en blanco con el método $ (document) .ready

Tengo varias funciones que ejemplifican varios gráficos usando Google Charts API.

Cuando los llamo sin el método $(document).ready de jQuery, todo funciona bien. Pero con ese método, estoy mirando una pantalla en blanco.

¿Por qué?

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

ACTUALIZACIÓN Aquí está el error que consigo en 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

Fuente

2011-03-04 Stann

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

es probablemente la respuesta más cercana, y la respuesta de Ryan Wheale en el siguiente también puede ser útil.

Is it ok to use google.setOnLoadCallback multiple times?

Fuente

2011-03-04 18:45:27 digitaljoel

aparentemente $ (documento) .ya sucede antes de que google object esté disponible y es por eso que google.load falla dentro de $ (document) .ready o algo así. Oh bien. – Stann

intenta cerrar la llamada a ready?

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

Fuente

2011-03-04 18:09:29 Andomar

:) gracias. eso fue solo un error tipográfico aquí. está cerrado en código real. – Stann

alguna otra idea? – Stann

@Andre: ¡No, pero estoy buscando otras respuestas! Parece que digitaljoel lo clavó. – Andomar

De acuerdo con la documentación de visualización de Google tiene que cargar el paquete visual (s) antes a onLoad o jQuery listo. Sugeriría cargar inmediatamente después de la referencia del script jsapi como se muestra a continuación.

De lo contrario, obtendrá un 1) google no está definido (error de referencia) o 2) si utiliza ajax posiblemente una respuesta en blanco & página en blanco sin errores.

secuencia carga: (usando tu ejemplo)

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

Fuente

2011-09-19 19:49:05

Hola esa solución no funcionó para mí, al parecer (supongo que no estoy seguro) Google biblioteca tiene algunos problemas cuando alcance lo llamas dentro de un objeto jQuery, por lo que la solución es bastante simple (aunque consiguió que no era tan simple: s) define una variable global y asigna el google Librari:

var localGoogle = google;

ve rara eh .. :) . Luego usa la variable que definiste para invocar el tOnCallback, que trabajó para mí espero que funcione para usted ..

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

Fuente

2011-11-17 22:29:52 Ricardo

Para una solución alternativa puede utilizar 'auto-carga' para incluir los paquetes que desee en la etiqueta script. Esto niega la necesidad de "google.setOnLoadCallback".

ver https://developers.google.com/loader/#AutoLoading para más detalles.

Por lo tanto, puede hacer todo como lo haría normalmente desde el evento jquery document ready.

También hay un asistente que puede configurar una URL para usted, pero actualmente el enlace está roto. Aquí está de todos modos: http://code.google.com/apis/loader/autoloader-wizard.html

Fuente

2012-02-03 07:42:39 bigtallbill

Aquí está el paradigma que estoy usando. Establezca una devolución de llamada para el método google.load, y no use google.setOnLoadCallback en absoluto (AFAIK esto no es necesario).

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

Fuente

2012-11-06 04:02:58 Paul

Esto resolvió mi problema de página en blanco, ¡gracias! En lugar de llamar a 'google.setOnLoadCallback (callback);' He añadido ''callback': callback' a la llamada' google.load() '. Loco que funciona, pero lo hizo. –

que HAV a llamar https://www.google.com/jsapi en lugar de http://www.google.com/jsapi

buena suerte

Fuente

2014-01-02 17:44:56 gounane

Esto funciona para mí:

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

     }

Demostración: jsfiddle

Fuente

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>

Fuente

2014-10-10 15:23:08

Google Charts API muestra una pantalla en blanco con el método $ (document) .ready

Respuesta

Cuestiones relacionadas