带有下拉列表的谷歌动画图表

Question

我正在尝试animate line chart使用Switch Button和Drop Down List。我的情况是drop down List有4个不同的状态（Green, Red, Blue, Yellow）和button，可以在Totals and Avg Time之间切换。通过查看Google文档Here并能够在Totals和Avg Time之间切换。问题出在下拉列表中，我希望每当用户从下拉列表中选择状态然后绘制折线图时按状态过滤我的列表。我不想要。发送请求到服务器只是过滤列表已经具有列表中的所有值。请告诉我，无论如何我能做到这一点。感谢。

EDITED

<script type="text/javascript">   
    google.load('visualization', '1', {packages: ['corechart']});
    function drawVisualization() {
        // Create and populate the data table for Avg Duration.
        var event_avg_data = new google.visualization.DataTable();
        event_avg_data.addColumn('string', 'Date');

        <g:each in="${selectedProductList}" var="prdName">
        event_avg_data.addColumn('number', '${prdName}');
        </g:each>

        event_avg_data.addRows(${prdHDates?.size()});

        <g:each in="${prdHDates}" status="i" var="prdDateString">
        event_avg_data.setValue(${i}, 0, '${prdDateString}');
        <g:each in="${selectedProductList}" status="j" var="prdName">
        event_avg_data.setValue(${i},${j+1}, <%= aggregatedList.find {it.createDate == prdDateString && it.productName == prdName}? aggregatedList.find {it.createDate == prdDateString && it.productName == prdName}.avgProcessingTime:0 %>);
        </g:each>
        </g:each>

        // Create and populate the data table for Totals.
        var event_totals_data = new google.visualization.DataTable();
        event_totals_data.addColumn('string', 'Date');

        <g:each in="${selectedProductList}" var="prdName">
        event_totals_data.addColumn('number', '${prdName}');
        </g:each>

        event_totals_data.addRows(${prdHDates?.size()});

        <g:each in="${prdHDates}" status="i" var="prdDateString">
        event_totals_data.setValue(${i}, 0, '${prdDateString}');
        <g:each in="${selectedProductList}" status="j" var="prdName">
        event_totals_data.setValue(${i},${j+1}, <%= aggregatedList.find {it.createDate == prdDateString && it.productName == prdName}? aggregatedList.find {it.createDate == prdDateString && it.productName == prdName}.totals:0 %>);
        </g:each>
        </g:each>

        // Create and draw the visualization.
        var data = [];
        data[0] = event_avg_data;
        data[1] = event_totals_data;

        var options = {
            //chartArea:{left:0,top:15,width:"50%",height:"50%"},

            width:1200,
            height:500, fontSize:12,
            vAxis: {title: "# Of Events"},
            hAxis: {title: "Date"},
            pointSize:3,smoothLine:true,
            animation:{
                duration: 1000,
                easing: 'out'
            },
        };
        var current = 0;
        // Create and draw the visualization.
        var chart = new google.visualization.LineChart(document.getElementById('data-div'));
        var button = document.getElementById('switchChart');
        function drawChart() {
            // Disabling the button while the chart is drawing.
            button.disabled = true;
            google.visualization.events.addListener(chart, 'ready',
                    function() {
                        button.disabled = false;
                        button.value = 'Switch to ' + (current ? 'Avg Duration' : 'Totals');
                        button.innerHTML = 'Switch to ' + (current ? 'Avg Duration' : 'Totals');
                    });
            options['title'] = ' ${params.reportType} Aggregation chart by '+ (current ? 'Totals' : 'Avg Duration') +'  : [${params.reportFromDate}] to [${params.reportToDate}]';
            options['vAxis'] = {title: ''+ (current ? '# of Events' : 'Avg Duration (ms)')}
            chart.draw(data[current], options);
        }
        drawChart();

        button.onclick = function() {
            current = 1 - current;
            drawChart();
        }
    }

    google.setOnLoadCallback(drawVisualization);

</script>

这是我的HTML ...在StatusList下面有[GREEN,RED,BLUE,YELLOW]值

<div class="form-inline" name="switchForm">
<div class="form-group">
<button id="switchChart" class="btn btn-success btn-sm" value="" style="background-color: #48802C"></button>
</div>

    <div class="form-group">
        <label>Switch Status:</label>
        <g:select name="statusCode" id="statusCode"  class="form-control input-sm"
                  from="${statusList}"
                  value="${params.statusCode}"/>
    </div>
</div>