Question

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

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

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

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

以下是我的javascripts：

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

下面是我处理下拉列表菜单选择并向我的Python处理程序发送“GET”请求的函数，它将返回一个替换字符串{{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

问题在于您没有解析reqId字段的tqx值（请参阅Implementing the ChartTools Datasource protocol）。

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

Google Chart仅在第一时间使用Javascript，Google Chart Tool和App Engine

1 个答案: