Google可视化图表ajax数据

Question

I'm trying to dynamically render a google visualization chart with an AJAX call in flask to set the data. User enters input then clicks a link which calls the ajax function to get the data. the "/ajax_test" view will return a json object but the problem I have is i don't know how to correctly pass the data back into the DataTable function. How do i pass the json data i'm getting from ajax to a variable for the drawchart function?

Chart function:

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

Ajax function:

<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

I have done something similar using the following code, this is a jinja2 example, so you have do adapt your code (change the way jsonData var is initialized):

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

Answer 2

This method doesn't know where jsondata comes from:

function drawChart() {
    var data = new google.visualization.DataTable(jsondata);
    ...
}

Add jsondata as a parameter:

function drawChart(jsondata) {
    var data = new google.visualization.DataTable(jsondata);
    ...
}

And then in your Ajax call pass jsondata to the method:

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