jQuery tải Google Visualization API với AJAX

Question

Có một vấn đề mà tôi không thể giải quyết, tôi đã tìm kiếm rất nhiều trên internet nhưng không tìm thấy gì cả.

Tôi có JavaScript này được sử dụng để thực hiện yêu cầu Ajax bằng PHP. Khi yêu cầu được thực hiện, nó gọi một hàm sử dụng API Google Visualization để vẽ một chú thíchtimeline để trình bày dữ liệu.

Kịch bản hoạt động tuyệt vời mà không có AJAX, nếu tôi làm mọi thứ nội tuyến nó hoạt động tốt, nhưng khi tôi cố gắng làm điều đó với AJAX nó không hoạt động !!!

Lỗi mà tôi nhận được là trong khai báo DataTable "dữ liệu", trong Công cụ dành cho nhà phát triển Google Chrome, tôi nhận được Uncaught TypeError: Cannot read property 'DataTable' of undefined.

Khi tập lệnh bị lỗi, mọi thứ trên trang sẽ bị xóa, nó chỉ hiển thị một trang trống.

Vì vậy, tôi không biết cách làm cho nó hoạt động.

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

Tôi nhớ khi tôi sử dụng một API Google nó một cách rõ ràng cho biết để khởi tạo nạp đầu tiên tắt. Vì vậy, có lẽ giữ chức năng google.load ra khỏi AJAX, và sau đó chỉ cần tiếp tục gọi phần thứ hai của chức năng của bạn đến thành công:

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

Bạn đã thử thực hiện việc này làm yêu cầu AJAX đồng bộ chưa? Lưu ý rằng cài đặt async bên dưới.

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

tôi không quen thuộc ở tất cả với các API của Google, nhưng tôi đoán rằng 'html' trong callback là thực sự json hoặc kịch bản, bạn có thể thử $ .ajax 'datatype' tùy chọn:

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

thông tin khác: http://api.jquery.com/jQuery.ajax/

Answer 4

Có vẻ như bạn đang thiếu thư viện Google cung cấp trực quan hóa. Bạn có chắc chắn bạn đã bao gồm tất cả các tập lệnh google cần thiết không?

Answer 5

Đây là một chút một shot trong bóng tối của:

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

Nó có thể là tài liệu tham khảo để html bị mất, và đóng cửa là bắt buộc.

Answer 6

Bạn có thể cung cấp mẫu dữ liệu được trả về không? Bạn có thể gọi trực tiếp 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

Tôi đang sử dụng một hệ thống tab AJAX dựa trên và Visualizations Chart Interactive Dòng của Google một trong những dự án của tôi và chạy vào một bức tường gạch tương tự.

Vì AJAX vốn có khả năng chặn tập lệnh tên miền chéo, bạn không thể tải API javascript của Google (http://www.google.com/jsapi) hoặc bất kỳ tài nguyên bên ngoài nào khác. Vì các điều khoản dịch vụ của Google cấm ngoại tuyến (còn được gọi là "không được lưu trữ trên Google") nên sử dụng API trực quan hóa của họ, bạn không thể có được bản sao các tập lệnh và lưu trữ chúng một cách hợp pháp theo yêu cầu.

Tôi đã thử một cách giải quyết hacky bao gồm tệp có tên "get_vis.php" thay vì "visualization_page.php" trong các tab của tôi; nơi nội dung của "get_vis.php" là:

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

Nhưng, không may mắn, có vẻ như cách duy nhất để có được API để tải đúng là để điều chỉnh thiết lập bảo mật để cho phép tương tác với các máy chủ của Google. Tôi không biết nếu nó giúp, nhưng may mắn.

Answer 8

Tôi biết đây là một chuỗi cũ nhưng điều này có thể giúp người khác.
tôi đã chạy vào cùng một vấn đề bây giờ và nó là rất tương tự (nếu không giống nhau) Tôi đã có trước đó với một CMS:

mã trên trang:

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

phần của kịch bản nạp với ajax:

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

Kết quả là một trang có văn bản "xin chào" có vẻ như vẫn đang được tải. Điều này là do phương pháp document.write. Kể từ khi kịch bản được nạp vào một tài liệu đã hoàn thành và đóng cửa, trình duyệt sẽ mở một tài liệu mới và tôi cho rằng công cụ javascript đang đợi dòng mã tiếp theo sẽ không bao giờ đến khi mở tài liệu mới đã xóa tài liệu đang được thực thi.

Answer 9

Tôi biết đây là một bài cũ, nhưng sau khi một số đào thông qua các tài liệu google.load, tôi thấy một tùy chọn async trong trường hợp bạn muốn tự động tải các libs:

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

Answer 10

Điều này phù hợp với tôi

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


       } 
      });  
     } 
}