ChartRangeFilter with Zoom

zoom function last day last week last monthg

by forssux

HTML

<script src="http://www.google.com/jsapi?.js"></script>
<div id="dashboard_div">Zoom
    <br />
    <input id="lastDay" type="button" value="Last Day" />
    <input id="lastWeek" type="button" value="Last Week" />
    <input id="lastMonth" type="button" value="Last Month" />
    <div id="chart_div"></div>
    <div id="control_div"></div>
</div>

CSS

#dashboard_div, #chart_div, #control_div {
    width: 100%;
}

JavaScript

function drawChart() {
    var data = new google.visualization.DataTable();
    var myView = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Value');
    data.addColumn('number', 'Vale');
    data.addColumn('string', 'woord');
    data.addRows([
        [new Date(2012, 1, 2), 9, 12, 'tak'],
        [new Date(2012, 2, 3), 8, 13, 'pet'],
        [new Date(2012, 1, 4), 7, 14, 'man'],
        [new Date(2012, 1, 4), 6, 15, 'aap'],
        [new Date(2012, 1, 5), 10, 12, 'bed'],
        [new Date(2012, 1, 9), 9, 14, 'steen']
    ]);


    var chart = new google.visualization.ChartWrapper({
        chartType: 'LineChart',
        containerId: 'chart_div',
        view: {
            'columns': [0,1, 2]
        },
        options: {
            height: 400,
            // omit width, since we set this in CSS
            chartArea: {
                width: '75%' // this should be the same as the ChartRangeFilter
            }
        }
    });

    var control = new google.visualization.ControlWrapper({
        controlType: 'ChartRangeFilter',
        containerId: 'control_div',
        options: {
            filterColumnIndex: 0,
            ui: {
                chartOptions: {
                    height: 50,
                    // omit width, since we set this in CSS
                    chartArea: {
                        width: '75%' // this should be the same as the ChartRangeFilter
                    }
                }
            }
        }
    });
    var dataView = new google.visualization.DataView(data);
    dataView.setColumns([0, 1, 2] );
    //dataView.hideColumns(3);
   // dataView.toDataTable(myView)
    var dashboard = new google.visualization.Dashboard(document.querySelector('dashboard_div'));
    dashboard.bind([control], [chart]);
    dashboard.draw(dataView);

    function zoomLastDay() {
        var range = data.getColumnRange(0);
        control.setState({
            range: {
               ...