jquery - script - return htmlservice createtemplatefromfile('' index '') evaluate();

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 encontré 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.

El script funciona muy bien sin AJAX, si hago todo en línea, funciona muy bien, pero cuando trato de 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 el script llega al error, todo en la página se borra, solo muestra una página en blanco.

Entonces 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

¿Has intentado hacer esto como una solicitud síncrona de AJAX? Observe la configuración de sincronización 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 2

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 script, puedes probar la opción $ .ajax ''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));
}
});

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

Answer 3

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

Answer 4

Esta es una pequeña oportunidad en la oscuridad:

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

Puede ser que la referencia a html se pierda y se requiera un cierre.

Answer 5

¿Podría proporcionar 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 6

Estoy usando un sistema de pestañas basado en AJAX y las visualizaciones de gráficos de líneas interactivas de Google en uno de mis proyectos y me encontré con un muro de ladrillos similar.

Debido al bloqueo inherente de AJAX de scripts de dominios cruzados, no puede cargar la API de Google javascript ( http://www.google.com/jsapi ) o cualquier otro recurso externo.

Y dado que 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"), no puede legalmente obtener una copia de los scripts y alojarlos usted mismo según sea necesario.

Intenté una solución estrafalaria 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 forma de cargar correctamente la API es ajustar la configuración de seguridad para permitir la interacción con los servidores de Google. No sé si ayuda, pero buena suerte.

Answer 7

Sé que este es un hilo viejo, pero esto podría ayudar a otros.
Me encontré con el mismo problema ahora y es muy similar (si no es el mismo) que tuve 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 de la secuencia de comandos cargada con ajax:

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

El resultado es una página con el texto "hola" que parece que todavía se está cargando. 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 8

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

Answer 9

Sé que esta es una publicación más antigua, pero después de buscar en los documentos de google.load, encontré una opción asíncrona en caso de que quiera cargar dinámicamente las librerías:

http://code.google.com/apis/loader/

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

Answer 10

Recuerdo que cuando usaba una API de Google, decía explícitamente que primero se inicializara la carga. Así que tal vez mantenga la función google.load fuera de AJAX, y luego siga 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));
}
});
});