Google 시각화 차트 아약스 데이터

Question

데이터를 설정하기 위해 플라스크에서 AJAX 호출로 Google 시각화 차트를 동적으로 렌더링하려고합니다. 사용자는 입력을 입력 한 다음 ajax 함수를 호출하는 링크를 클릭하여 데이터를 가져옵니다. "/ ajax_test"뷰는 json 개체를 반환하지만 내가 가진 문제는 데이터를 DataTable 함수로 다시 올바르게 전달하는 방법을 모른다는 것입니다. 어떻게 아약스에서 drawchart 함수의 변수로 전달되는 json 데이터를 전달합니까?

차트 기능 :

<script type="text/javascript"> 
function drawChart(){ 
    var data = new google.visualization.DataTable(jsondata); 
     var options = { 
      explorer: {}, 
      }; //end options 

    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 
    } 
</script> 

아약스 기능 : 변경 (코드를 적용 할 수있다, 그래서 나는 다음과 같은 코드를 사용하여 비슷한 짓을

<script type=text/javascript> 
$(function() { 
$('a#DrawChart').bind('click', function() { 
    $.getJSON($SCRIPT_ROOT + '/ajax_test', 
    {//input data sent to view} 
    , function(data) { 
    var jsondata = data.test_json; 
    drawChart(); 

    }); 
    return false; 
    }); 
    }); 
</script> 

Answer 1

이 방법은 어디에서(

function(data) { 
    var jsondata = data.test_json; 
    drawChart(jsondata); 
} 

Answer 2

, 이것은하는 jinja2 예입니다 방법 jsonData var 초기화 됨) :

<script type="text/javascript"> 
     //load the Google Visualization API and the chart 
    google.load('visualization', '1', {'packages': ['corechart']}); 

    google.setOnLoadCallback (createChart); 

    var jsonData = {{ value_columns | tojson | safe }} 

    function createChart() { 
     var dataTable = new google.visualization.DataTable(jsonData); 
     var chart = new google.visualization.LineChart(document.getElementById('chart')); 
     //define options for visualization 
     var options = {is3D: 'no', title: 'Some Title' }; 

     attachRedrawForTab(chart, dataTable, options); 
     attachRedrawForAccord(chart, dataTable, options); 
     //draw our chart 
     chart.draw(dataTable, options); 
    } 

</script>