2013-02-01 82 views
0

我需要在每次用戶從某些下拉菜單中選擇數值並提交時更新圖表。Google Chart第一次使用Javascript,Google Chart工具和App Engine

我正在編寫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> 
+0

爲什麼drawVisualization()在上面註釋掉了? –

+0

Hi Shay,drawVisualization()成功:函數(數據)不會影響圖表。當它被註釋掉或沒有註釋掉時,我嘗試了兩種情況。都沒有工作。 – user1475081

回答