jQuery загружает API визуализации Google с помощью AJAX

Question

Есть проблема, которую я не могу решить, я много искал в интернете, но ничего не нашел.

У меня есть этот JavaScript, который используется для выполнения Ajax-запроса PHP. Когда запрос выполнен, он вызывает функцию, которая использует API визуализации Google, чтобы нарисовать аннотированную временную шкалу для представления данных.

Сценарий прекрасно работает без AJAX, если я делаю все встроенное, он прекрасно работает, но когда я пытаюсь сделать это с AJAX, он не работает !!!

Я получаю сообщение об ошибке в объявлении DataTable «data», в Инструментах разработчика Google Chrome я получаю Uncaught TypeError: Cannot read property 'DataTable' of undefined.

Когда скрипт доходит до ошибки, все на странице очищается, он просто показывает пустую страницу.

Так что я не знаю, как заставить это работать.

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

Я помню, когда я использовал Google API, в нем явно говорилось, чтобы сначала инициализировать загрузку. Поэтому, возможно, держите функцию google.load вне AJAX, а затем просто продолжайте вызывать вторую часть вашей функции в случае успеха:

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

Я знаю, что это старый пост, но после некоторого изучения документов google.load я нашел асинхронную опцию на случай, если вы хотите динамически загрузить библиотеки:

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

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

Answer 3

Я знаю, что это старая тема, но это может помочь другим.
Я столкнулся с той же проблемой сейчас, и она очень похожа (если не то же самое), что я имел ранее с CMS:

код на странице:

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

часть скрипта, загруженная с помощью ajax:

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

В результате получается страница с текстом «привет», которая выглядит так, как будто она все еще загружается. Это вызвано методом document.write. Поскольку скрипт загружается в уже готовый и закрытый документ, браузер открывает новый, и я предполагаю, что механизм javascript ожидает следующей строки кода, которая никогда не появится, поскольку при открытии нового документа удаляется исполняемый. *

Answer 4

Не могли бы вы предоставить образец возвращаемых данных? Вы можете напрямую вызвать 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 5

Это немного выстрел в темноте:

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

Возможно, что ссылка на html потеряна, и требуется закрытие.

Answer 6

Это работает для меня

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 7

Я использую систему вкладок на основе AJAX и визуализации интерактивных линейных диаграмм Google в одном из моих проектов и натолкнулся на похожую кирпичную стену.

Из-за присущей AJAX блокировки междоменных сценариев вы не можете загрузить Google javascript API (http://www.google.com/jsapi) или любые другие внешние ресурсы.

А так как условия обслуживания Google запрещают использование их API визуализации в офлайн-режиме (он же «не размещен в Google»), вы не можете на законных основаниях получить копию сценариев и разместить их самостоятельно, как требуется.

Я попробовал обходной путь включения файла «get_vis.php» вместо «visualization_page.php» в моих вкладках; где содержимое "get_vis.php":

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

Но, к счастью, похоже, что единственный способ правильно загрузить API - это настроить параметры безопасности, чтобы обеспечить взаимодействие с серверами Google. Я не знаю, поможет ли это, но удачи.

Answer 8

Похоже, вам не хватает библиотеки Google, которая обеспечивает визуализацию. Вы уверены, что включили все необходимые скрипты Google?

Answer 9

Я совсем не знаком с API Google, но я думаю, что «html» в обратном вызове на самом деле является json или скрипт, вы можете попробовать параметр $ .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));                                                   
    }
});

подробнее: http://api.jquery.com/jQuery.ajax/

Answer 10

Вы пытались сделать это как синхронный AJAX-запрос? Обратите внимание на настройку async ниже.

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