我需要在每次用戶從某些下拉菜單中選擇數值並提交時更新圖表。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>
爲什麼drawVisualization()在上面註釋掉了? –
Hi Shay,drawVisualization()成功:函數(數據)不會影響圖表。當它被註釋掉或沒有註釋掉時,我嘗試了兩種情況。都沒有工作。 – user1475081