jquery - tipos - La API de Google Charts muestra una pantalla en blanco con el método $(documento).ready

google jsapi charts

Question

Tengo varias funciones que ejemplifican varios gráficos utilizando la API de Google Charts.

Cuando los llamo sin el método $(document).ready jQuery, todo funciona bien. Pero con ese método, estoy mirando la 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 recibo 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

Answer 1

Aquí está el paradigma que estoy usando. Establezca una devolución de llamada para el método google.load y no use en absoluto el google.setOnLoadCallback (AFAIK 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);
}

Answer 2

De acuerdo con la documentación de visualización de Google, debe cargar el (los) paquete (s) visual (es) antes de onload o jquery ready. Yo sugeriría cargar inmediatamente después de la referencia del script jsapi como se muestra a continuación.

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

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

Answer 3

Debe llamar a https://www.google.com/jsapi lugar de http://www.google.com/jsapi

buena suerte

Answer 4

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

        }

Demo: jsfiddle

Answer 5

Hola, esa solución no me funcionó, al parecer (supongo que no estoy seguro) google library tiene algunos problemas de alcance cuando lo llama dentro de un objeto jquery, por lo que la solución es bastante simple (aunque no fue así). tan simple: s) define una variable global y asigna las bibliotecas de google:

var localGoogle = google;

parece gracioso eh:) ... luego usa la variable que definiste para invocar el setOnCallback, funcionó para mí, espero que funcione para ti ..

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

Answer 6

Para una solución alternativa, puede usar ''carga automática'' para incluir los paquetes que desea en la etiqueta de script. Esto niega la necesidad de "google.setOnLoadCallback".

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

Por lo tanto, puede hacer todo como lo haría normalmente en un evento preparado para documentos de jquery.

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

Answer 7

Trate de cerrar la llamada para ready ?

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

Answer 8

google.setOnLoadCallback con jQuery $ (document) .ready (), ¿está bien mezclar?

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

¿Está bien usar google.setOnLoadCallback varias veces?

Answer 9

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