jAJAX로 Google 시각화 API 로드

jAJAX로 Google 시각화 API 로드

제가 해결할 수 없는 문제가 있습니다, 인터넷을 많이 찾아봤지만 아무것도 발견하지 못했습니다.

저는 PHP로 Ajax 요청을 하는 데 사용되는 JavaScript를 가지고 있습니다.요청이 완료되면 Google 시각화 API를 사용하여 주석이 달린 타임라인을 그려 데이터를 표시하는 함수를 호출합니다.

스크립트는 AJAX 없이도 잘 작동합니다. 제가 모든 것을 인라인으로 하면 잘 작동하지만 AJAX로 하려고 하면 작동하지 않습니다!!!

내가 받는 오류는 "데이터" 데이터 테이블의 선언, 내가 받는 구글 크롬 개발자 도구에 있습니다.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});                              
}

제가 구글 API를 사용했을 때 로드를 먼저 초기화하라고 명시적으로 말했던 것을 기억합니다.따라서 AJAX에서 Google.load 기능을 사용하지 않고 성공하면 기능의 두 번째 부분을 계속 호출할 수 있습니다.

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

이것이 오래된 게시물인 것은 알지만, 구글.load 문서를 좀 뒤지고 나서, 당신이 libs를 동적으로 로드하고 싶을 때를 대비해 비동기 옵션을 찾았습니다.

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

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

저는 이것이 오래된 스레드라는 것을 알지만 이것은 다른 사람들에게 도움이 될 수 있습니다.
나는 지금 같은 문제에 부딪혔고 이전에 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>

결과적으로 "안녕하세요"라는 텍스트가 있는 페이지가 계속 로드되고 있는 것처럼 보입니다.이것은 문서로 인해 발생합니다.쓰기 방법스크립트가 이미 완료되고 닫힌 문서에 로드되기 때문에 브라우저는 새로운 문서를 열고 자바스크립트 엔진은 실행 중인 문서를 삭제했기 때문에 절대로 도착하지 않을 코드의 다음 줄을 기다리고 있는 것 같습니다.

이것은 약간 어두운 곳에서의 시도입니다.

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

html에 대한 참조가 손실되어 폐쇄가 필요할 수 있습니다.

반송된 데이터의 샘플을 제공할 수 있습니까?직접 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);                                                   
}}); 

동기식 AJAX 요청으로 이 작업을 시도해 보셨습니까?아래의 비동기 설정에 유의하십시오.

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

나는 구글 아피스에 전혀 익숙하지 않지만, 콜백의 'https'는 실제로 json 또는 스크립트인 것 같습니다. $.vms '데이터를 시도할 수 있습니다.Type' 옵션:

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

시각화 기능을 제공하는 Google 라이브러리가 누락된 것 같습니다.필요한 Google 스크립트를 모두 포함한 것이 확실합니까?

제 프로젝트 중 하나에서 AJAX 기반 탭 시스템과 Google의 Interactive Line Chart Visualization을 사용하고 있는데 비슷한 벽돌 벽에 부딪혔습니다.

AJAX는 도메인 간 스크립팅을 고유하게 차단하므로 Google Javascript API(http://www.google.com/jsapi) 또는 기타 외부 리소스)를 로드할 수 없습니다.

또한 Google의 서비스 약관은 오프라인("Google에서 호스팅되지 않음"이라고도 함)에서 시각화 API를 사용하는 것을 금지하기 때문에, 필요에 따라 스크립트의 복사본을 가져와 직접 호스팅할 수 없습니다.

탭에 "visualization_page.php" 대신 "get_vis.php"라는 파일을 포함하는 해키한 해결 방법을 시도했습니다. 여기서 "get_vis.php"의 내용은 다음과 같습니다.

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

하지만 API를 제대로 로드할 수 있는 유일한 방법은 Google의 서버와 상호 작용할 수 있도록 보안 설정을 조정하는 것입니다.도움이 될지 모르겠지만 행운을 빌어요.

이것은 나에게 효과가 있습니다.

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


                }
            });    
        }
}

언급URL : https://stackoverflow.com/questions/2315250/jquery-load-google-visualization-api-with-ajax