jQuery carga la API de visualización de Google con AJAX

Question

Hay un problema que no puedo resolver, he estado buscando mucho en Internet pero no he encontrado nada.

Tengo este JavaScript que se utiliza para hacer una solicitud de Ajax por PHP. Cuando se realiza la solicitud, llama a una función que utiliza la API de visualización de Google para dibujar una línea de tiempo anotada para presentar los datos.

La secuencia de comandos funciona muy bien sin AJAX, si hago todo en línea, funciona muy bien, pero cuando intento hacerlo con AJAX, ¡no funciona!

El error que recibo se encuentra en la declaración de la "DataTable DataTable", en Google Chrome Developer Tools obtengo un Uncaught TypeError: Cannot read property 'DataTable' of undefined.

Cuando la secuencia de comandos llega al error, todo en la página se borra, solo muestra una página en blanco.

Así que no sé cómo hacerlo funcionar.

$(document).ready(function(){    
    // Get TIER1Tickets     
    $("#divTendency").addClass("loading"); 

    $.ajax({ 
     type: "POST", 
     url: "getTIER1Tickets.php", 
     data: "", 
     success: function(html){ 
      // Succesful, load visualization API and send data  
      google.load('visualization', '1', {'packages': ['annotatedtimeline']}); 
      google.setOnLoadCallback(drawData(html));             
     } 
    });  
}); 


function drawData(response){    
    $("#divTendency").removeClass("loading"); 

    // Data comes from PHP like: <CSV ticket count for each day>*<CSV dates for ticket counts>*<total number of days counted> 
    // So it has to be split first by * then by , 
    var dataArray = response.split("*"); 
    var dataTickets = dataArray[0]; 
    var dataDates = dataArray[1]; 
    var dataCount = dataArray[2]; 

    // The comma separation now splits the ticket counts and the dates 
    var dataTicketArray = dataTickets.split(","); 
    var dataDatesArray = dataDates.split(","); 

    // Visualization data        
    var data = new google.visualization.DataTable(); 
    data.addColumn('date', 'Date'); 
    data.addColumn('number', 'Tickets'); 
    data.addRows(dataCount);              

    var dateSplit = new Array(); 
    for(var i = 0 ; i < dataCount ; i++){ 
     // Separating the data because must be entered as "new Date(YYYY,M,D)" 
     dateSplit = dataDatesArray[i].split("-"); 
     data.setValue(i, 0, new Date(dateSplit[2],dateSplit[1],dateSplit[0])); 
     data.setValue(i, 1, parseInt(dataTicketArray[i])); 
    }    

    var annotatedtimeline = new google.visualization.AnnotatedTimeLine(document.getElementById('divTendency')); 
    annotatedtimeline.draw(data, {displayAnnotations: true});        
} 

Answer 1

Recuerdo cuando utilicé una API de Google dijo explícitamente para inicializar la carga por primera vez. Así que tal vez mantener la función google.load fuera del AJAX, y luego simplemente seguir llamando a la segunda parte de su función en caso de éxito:

//Straight Away! 
google.load('visualization', '1', {'packages': ['annotatedtimeline']}); 

$(document).ready(function(){ 
    // Get TIER1Tickets     
    $("#divTendency").addClass("loading"); 

    $.ajax({ 
     type: "POST", 
     url: "getTIER1Tickets.php", 
     data: "", 
     success: function(html){ 
      // Succesful, load visualization API and send data 
      google.setOnLoadCallback(drawData(html)); 
     } 
    }); 
}); 

Answer 2

¿Ha intentado hacer esto como una solicitud síncrona de AJAX? Observe la configuración de async a continuación.

$.ajax({ 
    type: "POST", 
    async: false, 
    url: "getTIER1Tickets.php", 
    data: "", 
    success: function(html){ 
     // Succesful, load visualization API and send data  
     google.load('visualization', '1', {'packages': ['annotatedtimeline']}); 
     google.setOnLoadCallback(drawData(html));             
    } 
}); 

Answer 3

No estoy familiarizado en absoluto con las API de Google, pero supongo que 'html' en la devolución de llamada es en realidad JSON o secuencia de comandos, puede intentar la opción de $ .ajax 'tipoDatos':

$.ajax({ 
    type: "POST", 
    url: "getTIER1Tickets.php", 
    dataType: "json",//"script" 
    data: "", 
    success: function(html){ 
     // Succesful, load visualization API and send data  
     google.load('visualization', '1', {'packages': ['annotatedtimeline']}); 
     google.setOnLoadCallback(drawData(html));             
    } 
}); 

más información: http://api.jquery.com/jQuery.ajax/

Answer 4

Parece que se está perdiendo la biblioteca de Google que proporciona la visualización. ¿Estás seguro de haber incluido todos los scripts de google necesarios?

Answer 5

Esto es un poco de un tiro en la oscuridad:

google.setOnLoadCallback(function() { drawData(html) });

Puede ser que la referencia a html se pierde, y se requiere un cierre.

Answer 6

¿Podría proporcionarnos una muestra de los datos devueltos? puede llamar directamente a drawData (html):

$.ajax({ 
type: "POST", 
async: false, 
url: "getTIER1Tickets.php", 
data: "", 
success: function(html){ 
    // Succesful, load visualization API and send data  
    google.load('visualization', '1', {'packages': ['annotatedtimeline']}); 
    //You are already in a callback function, better like this ? 
    drawData(html);             
}}); 

Answer 7

Estoy utilizando un sistema de pestañas, basado en AJAX y visualizaciones Gráfico de línea interactiva de Google en uno de mis proyectos y se encontró con una pared de ladrillo similar.

Debido bloqueo inherente de AJAX de secuencias de comandos entre dominios, no se puede cargar el API de JavaScript de Google (http://www.google.com/jsapi) o cualesquiera otros recursos externos.

Y como los términos de servicio de Google prohíben el uso de su API de visualización fuera de línea (también conocido como "no alojado en Google"), legalmente no puede obtener una copia de los scripts y alojarlos usted mismo cuando sea necesario.

Intenté una solución hacky de incluir un archivo llamado "get_vis.php" en lugar de "visualization_page.php" en mis pestañas; donde el contenido de "get_vis.php" es:

<?php 
echo file_get_contents('http://domain.com/path/to/visualization_page.php'); 
?> 

Pero, sin suerte, parece que la única manera de conseguir la API para cargar correctamente es ajustar la configuración de seguridad con el fin de permitir la interacción con los servidores de Google. No sé si ayuda, pero buena suerte.

Answer 8

Sé que este es un hilo antiguo, pero esto podría ayudar a otros.
me he encontrado con el mismo problema ahora y es muy similar (si no el mismo) que tenía antes con un CMS:

código en la página:

<div id='targetdiv'></div> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('#targetdiv').load('...some url...'); 
}); 
</script> 

parte del guión cargado con el Ajax:

<script type="text/javascript"> 
    document.write("hello"); 
</script> 

el resultado es una página con el texto "hola" que parece que todavía está siendo cargado. Esto es causado por el método document.write. Como la secuencia de comandos se carga en un documento ya finalizado y cerrado, el navegador abre uno nuevo y supongo que el motor de JavaScript está esperando la siguiente línea de código que nunca llegará, ya que la apertura de un documento nuevo elimina el que se está ejecutando.

Answer 9

Sé que esto es un mensaje de más edad, pero después de algo de investigación a través de los documentos google.load, me encontré con una opción asíncrono en caso de que desee cargar dinámicamente las librerias:

function loadMaps() { 
    google.load("visualization", "2", {"callback" : function(){ alert(4); }}); 
} 

Answer 10

Esto funciona para mí

google.load("visualization", "1", { packages: ["corechart"] }); 

      var chart ; 
      var data ; 
      var options; 
     function Change(s) 
     { 
       // s in json format  
       google.setOnLoadCallback(reDraw(s)); 
       function reDraw(s) { 
        console.log(new Function("return " + s)().length); // to test if json is right 
        data = google.visualization.arrayToDataTable(new Function("return "+s)()); 

        options = { 
        title: 'Product Scanes', 
        vAxis: { title: '', titleTextStyle: { color: 'red'} }   
       }; 

       }   
       chart = new google.visualization.BarChart(document.getElementById('chart_div')); 
       chart.draw(data, options); 
     } 
     function requestDate() // cal the method when you want to draw the chart 
     { 

      $.ajax({ 
       type: "POST", // CHANGED 
       // contentType: "application/json; charset=utf-8", 
       url: "something.php", 
       data: { parameters you wanna pass }, 
       success: function (d) { 
       Change(d); 


       } 
      });  
     } 
}