谷歌图表API无法动态设置数据视图列

我正在创建一个基于谷歌API的折线图，我想根据用户选择做列显示。我正在使用数据视图，如果我在代码中设置数据列它的工作，但如果我试图动态设置它不工作，如下面的示例

    var dataViewMean = new google.visualization.DataView(dataTable);
    //dataViewMean.setColumns([check_vals.join()]); //This doesn't work
    dataViewMean.setColumns([0, 1, 2, 3, 4]); //This works

我的html

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <div id="chart_index" style="width: 400px; height: 200px;"></div>
    <div>
    <div id="chart_mean" style="width: 400px; height: 200px;"></div>
    <div>
    <table cellpadding="0" cellspacing="15" border="0">
        <tr>
            <td>
                <div>
                    <input name="sChk" type="checkbox" class="chkVals" value="1" checked="checked" />&nbsp;Current</div>
            </td>
            <td>
                <div>
                    <input name="sChk" type="checkbox" class="chkVals" value="2" checked="checked" />&nbsp;95th Percentile</div>
            </td>
            <td>
                <div>
                    <input name="sChk" type="checkbox" class="chkVals" value="3" checked="checked" />&nbsp;Free Flow</div>
            </td>
            <td>
                <div>
                    <input name="sChk" type="checkbox" class="chkVals" value="4" checked="checked" />&nbsp;Mean</div>
            </td>
        </tr>
    </table>
</div>

和下面是我的脚本

    <script type="text/javascript">
$(function() {
    $(".chkVals").on('click', function(e) {
        //alert("hi");
        drawTTCharts();
    });
});

google.load('visualization', '1', {
    packages: ['linechart']
});
google.setOnLoadCallback(drawTTCharts);

function drawTTCharts() {
    var chartTitle;
    // Create and populate the data table.
    var dataTable = new google.visualization.DataTable();
    // checkbox select for choosing the column to draw travel time chart    
    var check_vals = [];
    check_vals.push(0);
    for (var i = 0; i < document.getElementsByName("sChk").length; i++) {
        if (document.getElementsByName("sChk")[i].checked) {
            check_vals.push(document.getElementsByName("sChk")[i].value);
        }
    }
    //Declare column Index Chart: Testing data view
    dataTable.addColumn('string', 'Start Time');
    dataTable.addColumn('number', 'Current Travel Time');
    dataTable.addColumn('number', '95th Percentile Travel Time');
    dataTable.addColumn('number', 'Free Flow Travel Time');
    dataTable.addColumn('number', 'Mean Travel Time');
    dataTable.addColumn('number', 'Travel Time Index');
    dataTable.addColumn('number', 'Planning Time Index');
    dataTable.addColumn('number', 'Buffer Time Index');

    dataTable.addRows([
        ['02:20:00', 114.60, 98, 118.00, 114.88, 1.17, .03, 1.20],
        ['02:25:00', 113.00, 98, 117.25, 115.01, 1.17, .02, 1.20],
        ['02:30:00', 113.00, 98, 118.00, 115.06, 1.17, .03, 1.20],
        ['02:35:00', 113.00, 98, 117.80, 114.77, 1.17, .03, 1.20],
        ['02:40:00', 112.80, 98, 119.00, 114.72, 1.17, .04, 1.21],
        ['02:45:00', 110.40, 98, 119.00, 115.68, 1.18, .03, 1.21],
        ['02:50:00', 109.00, 98, 118.00, 114.74, 1.17, .03, 1.20],
        ['02:55:00', 113.00, 98, 117.60, 114.37, 1.17, .03, 1.20],
        ['03:00:00', 115.00, 98, 117.60, 114.90, 1.17, .03, 1.20],
        ['03:05:00', 115.00, 98, 117.40, 114.53, 1.17, .03, 1.20],
        ['03:10:00', 115.00, 98, 118.00, 114.58, 1.17, .03, 1.20],
        ['03:15:00', 115.00, 98, 117.80, 114.93, 1.17, .03, 1.20],
        ['03:20:00', 115.00, 98, 116.80, 114.15, 1.16, .03, 1.19],
        ['03:25:00', 115.00, 98, 116.00, 113.83, 1.16, .02, 1.18],
        ['03:30:00', 110.80, 98, 117.00, 114.06, 1.16, .03, 1.19],
        ['03:35:00', 108.00, 98, 117.00, 114.03, 1.16, .03, 1.19]
    ]);

    var dataViewMean = new google.visualization.DataView(dataTable);
    //alert(check_vals.join());
//dataViewMean.setColumns([check_vals.join()]); //This doesn't work
    dataViewMean.setColumns([0, 1, 2, 3, 4]); //This works

    var dataViewIndex = new google.visualization.DataView(dataTable);
    dataViewIndex.setColumns([0, 5, 6, 7]); //Select columns for chart
    drawMeanChart(dataViewMean);
    drawIndexChart(dataViewIndex);
}

function drawMeanChart(pDataMean) {
    //alert(pDataMean);
    // Create and draw Mean the visualization.
    new google.visualization.LineChart(document.getElementById('chart_mean')).
    draw(pDataMean, {
        curveType: "function",
        //title: chartTitle,
        width: 445,
        height: 220,
        backgroundColor: '#FFEBC2',
        vAxis: {
            title: 'Travel Time (Sec.)'
        },
        hAxis: {
            title: 'Time Interval'
        },
        legend: {
            position: 'top'
        } //,
        //series: { 2: { targetAxisIndex: 1 }, 3: { targetAxisIndex: 1 }, 3: { targetAxisIndex: 1} }, 
        //vAxes: { 1: { title: 'Index'} }
    });
}
function drawIndexChart(pDataIndex) {
    // Create and draw Index the visualization.
    new google.visualization.LineChart(document.getElementById('chart_index')).
    draw(pDataIndex, {
        curveType: "function",
        //title: chartTitle,
        width: 445,
        height: 220,
        backgroundColor: '#CDE6FF',
        vAxis: {
            title: 'Index'
        },
        hAxis: {
            title: 'Time Interval'
        },
        legend: {
            position: 'top'
        }
    });
}
    </script>

请帮助大家，提前感谢。

我的完整代码在JSFiddle http://jsfiddle.net/brijesh26/e6Fnm/