jQuery caricare l'API di visualizzazione di Google con AJAX

Question

C'è un problema che non riesco a risolvere, ho cercato molto su internet ma non ho trovato nulla.

Ho questo JavaScript che viene utilizzato per eseguire una richiesta Ajax da PHP. Al termine della richiesta, chiama una funzione che utilizza l'API di visualizzazione di Google per disegnare una data annotated per presentare i dati.

Lo script funziona alla grande senza AJAX, se faccio tutto in linea funziona benissimo, ma quando provo a farlo con AJAX non funziona !!!

L'errore che ottengo è nella dichiarazione del "Data" DataTable, negli Strumenti per sviluppatori di Google Chrome ottengo un Uncaught TypeError: Cannot read property 'DataTable' of undefined.

Quando lo script raggiunge l'errore, tutto nella pagina viene cancellato, mostra solo una pagina vuota.

Quindi non so come farlo funzionare.

$(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

Mi ricordo quando ho usato un API di Google esplicitamente detto per inizializzare il carico in primo luogo fuori. Così forse mantenere la funzione google.load fuori dal AJAX, e poi basta continuare ad invocare la seconda parte della vostra funzione in caso di successo:

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

Hai provato a fare ciò come una richiesta sincrona AJAX? Si noti l'impostazione async di seguito.

$.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

non ho familiarità affatto con le API di Google, ma credo che 'html' nel callback è in realtà JSON o script, è possibile provare il $ .ajax opzione 'dataType':

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

maggiori informazioni: http://api.jquery.com/jQuery.ajax/

Answer 4

Sembra che vi state perdendo la libreria di Google che fornisce la visualizzazione. Sei sicuro di aver incluso tutti gli script di google necessari?

Answer 5

Questo è un po 'un salto nel buio:

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

Può essere che il riferimento in html è perso, è richiesta una chiusura.

Answer 6

Potrebbe fornire un campione dei dati restituiti? Si può chiamare direttamente 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

Sto usando un sistema di scheda basata su AJAX e le visualizzazioni Grafico Line Interactive di Google in uno dei miei progetti e mi sono imbattuto in un muro di mattoni simile.

A causa del blocco intrinseco di AJAX dello scripting tra domini, non è possibile caricare l'API javascript di Google (http://www.google.com/jsapi) o altre risorse esterne.

E poiché i termini di servizio di Google vietano l'utilizzo della loro API di visualizzazione offline (ovvero "non ospitato su Google"), non è possibile ottenere legalmente una copia degli script e ospitarli come richiesto.

Ho provato una soluzione hacky di includere un file chiamato "get_vis.php" invece di "visualization_page.php" nelle mie schede; dove il contenuto di "get_vis.php" è:

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

Ma, senza fortuna, sembra che l'unico modo per ottenere l'API per caricare correttamente è quello di regolare le impostazioni di sicurezza in modo da consentire l'interazione con i server di Google. Non so se aiuta, ma buona fortuna.

Answer 8

So che questo è un thread vecchio, ma questo potrebbe aiutare gli altri.
ho incontrato lo stesso problema ora ed è molto simile (se non lo stesso) che ho avuto in precedenza con un CMS:

codice nella pagina:

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

parte dello script caricati with ajax:

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

Il risultato è una pagina con il testo "Ciao", sembra che sia ancora in fase di caricamento. Questo è causato dal metodo document.write. Poiché lo script è caricato in un documento già finito e chiuso, il browser ne apre uno nuovo e suppongo che il motore di javascript stia aspettando la prossima riga di codice che non arriverà mai come l'apertura di un nuovo documento cancellato da quello in esecuzione.

Answer 9

So che questo è un posto più vecchio, ma dopo un po 'scavare attraverso la documentazione google.load, ho trovato un'opzione async nel caso in cui si desidera caricare dinamicamente le librerie:

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

Answer 10

Questo funziona per me

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


       } 
      });  
     } 
}