如何在谷歌图表的范围控制窗口中显示条形图

Question

在这里小提琴 https://jsfiddle.net/811x5f6d/

现在它显示范围控制中的线图。我想在范围控制窗口中创建条形图（列）以模仿我的实际图表窗口。我试过的选项都没有。有办法吗？

<script type="text/javascript">
google.load('visualization', '1', {
    packages: ['controls']
});
google.setOnLoadCallback(createTable);

function createTable() {
    // Create the dataset (DataTable)
    var myData = google.visualization.arrayToDataTable([
        ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua NewGuinea', 'Rwanda', 'Average'],
        [1, 165, 938, 522, 998, 450, 614.6],
        [2, 135, 1120, 599, 1268, 288, 682],
        [3, 157, 1167, 587, 807, 397, 623],
        [4, 139, 1110, 615, 968, 215, 609.4],
        [5, 136, 691, 629, 1026, 366, 569.6]
    ]);


    // Create a dashboard.
    var dash_container = document.getElementById('dashboard_div'),
        myDashboard = new google.visualization.Dashboard(dash_container);

    // Create a date range slider
    var myDateSlider = new google.visualization.ControlWrapper({
        'controlType': 'ChartRangeFilter',
            'containerId': 'control_div',
            'options': {
            'filterColumnLabel': 'Month',
            'chartType' : 'ComboChart'
        }
    });


    // Bar chart visualization
    var myChart = new google.visualization.ChartWrapper({
        'chartType': 'ColumnChart',
            'containerId': 'line_div',
        title: 'Monthly Coffee Production by Country',
        vAxis: {
            title: 'Cups'
        },
        hAxis: {
            title: 'Month'
        },
        seriesType: 'bars'
    });

    // Bind myLine to the dashboard, and to the controls
    // this will make sure our line chart is update when our date changes
    myDashboard.bind(myDateSlider, myChart);

    myDashboard.draw(myData);
}
</script>
<div id="dashboard_div">
<div id="control_div">
    <!-- Controls renders here -->
</div>
<div id="line_div">
    <!-- Line chart renders here -->
</div>
<div id="table_div">
    <!-- Table renders here -->
</div>
</div>