Google Chart第一次使用Javascript，Google Chart工具和App Engine

Question

我需要在每次用户从某些下拉菜单中选择数值并提交时更新图表。

我正在编写Python脚本来处理选定的选项，并根据用户的选择从数据库中提取数据，然后使用字符串替换技术将数据传递给HTML。 JavaScript从Python获取数据，并使用谷歌图表API来生成图表。

但是这只能使用一次。第一次后，用户选择并提交选择，图表保持不变。我可以看到使用萤火虫工具的数据是正确的。

有人可以帮助我吗？谢谢！

下面是我的JavaScript：

script src="http://www.google.com/jsapi?key=ABQIAAAA1Vvq5pLyw5IAAQQtCIurLhSCGfxgLuOmAJcC-OBbFOMYrpib_BSypK7Qf_9YkaT-2SzpuOBRKp6Bqw" type="text/javascript"></script> 
    <script type="text/javascript"> 
     google.load("jquery", "1.3.2"); 
    </script> 

     <!--Load the AJAX API--> 
     <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
     <script type="text/javascript"> 
      google.load('visualization', '1', {packages: ['corechart']}); 
     </script> 
     <script type="text/javascript"> 
      google.setOnLoadCallback(drawVisualization); 
      function drawVisualization() { 
         var data = new google.visualization.DataTable(); 
         {%if chart_Data%} 
          data.addColumn('string','Date Time'); 
          data.addColumn('number','Wireless Mini CCB Controls'); 
          data.addColumn('number','FNX App Controls'); 
          data.addColumn('number','Hoist Status'); 
          data.addRows({{chart_Data}}); 

          //var data = google.visualization.arrayToDataTable({{chart_Data}}); 

         var options = { 
           title: 'Status of Hoists', 
           vAxis: {title: 'Status of Hoists'}, 
           isStacked: true 
         }; 

          var chart = new google.visualization.SteppedAreaChart(document.getElementById('status_chart')); 
          chart.draw(data, options); 
         {% endif %} 
    } 

下面是我的函数来处理下拉列表菜单选择和发送“GET”请求我的Python处理程序，它会返回一个字符串替换{{chart_Data}} ：

function monitorHoist(hoist_to_monitor,month,day,year){ 

      var hoist_to_monitor_text = document.getElementById('hoist_to_monitor').options[document.getElementById('hoist_to_monitor').selectedIndex].value 
      var month_text = document.getElementById('month').options[document.getElementById('month').selectedIndex].value 
      var day_text = document.getElementById('day').options[document.getElementById('day').selectedIndex].value 
      var year_text = document.getElementById('year').options[document.getElementById('year').selectedIndex].value 
      $.ajax({ 
      type: 'GET', 
      url: '/all?command=monitor&hoist_to_monitor=' + hoist_to_monitor_text +'&month='+month_text+'&day='+day_text+'&year='+year_text, 
      //data: hoist_to_monitor_text,month_text,day_text,year_text, 
      timeout: 60000, 
      success: function(data) { 
       $("#status").html('Success in sending request.'); 
       //drawVisualization(); 
      }, 
      error: function(XMLHttpRequest, textStatus, errorThrown) { 
       $("#status").html('Timeout sending request.'); 
      } 
     }); 
     } 

下面是图表的划分：

<div id='status_chart' style="width: 900px; height: 500px;"></div> 

Answer 1

的proble m表示您不解析tqx字段的值（请参阅Implementing the ChartTools Datasource protocol）。

如果使用gviz_api（https://code.google.com/p/google-visualization-python/），则必须将值req_id传递给方法ToJsonResponse。