Google Charts range filter control for date format
<p>I have a page that displays data using LineChart with a <code>ChartRangeFilter</code> control.</p>

<pre><code>&lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
google.load('visualization', '1', {packages: ['controls', 'charteditor']});
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'X');
    data.addColumn('number', 'Y1');
    data.addColumn('number', 'Y2');

    for (var i = 0; i &lt; 12; i++) {
        data.addRow([new Date(2016, i,1), Math.floor(Math.random() * 200), Math.floor(Math.random() * 200)]);
    }

    var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));

    var control = new google.visualization.ControlWrapper({
        controlType: 'ChartRangeFilter',
        containerId: 'control_div',
        options: {
            filterColumnIndex: 0,
            ui: {
                chartOptions: {
                    height: 50,
                    width: 600,
                    chartArea: {
                        width: '80%'
                    }
                },
                chartView: {
                    columns: [0, 1]
                }
            }
        }
    });

    var chart = new google.visualization.ChartWrapper({
        chartType: 'LineChart',
        containerId: 'chart_div'
    });
    function setOptions (wrapper) {
        wrapper.setOption('width', 620);
        wrapper.setOption('chartArea.width', '80%');
    }

    setOptions(chart);

    dash.bind([control], [chart]);
    dash.draw(data);
    google.visualization.events.addListener(control, 'statechange', function () {
        var v = control.getState();
        document.getElementById('dbgchart').innerHTML = v.range.start+ ' to ' +v.range.end;
        return 0;
    });
}
&lt;/script&gt;

&lt;div id="dashboard"&gt;
    &lt;div id="chart_div"&gt;&lt;/div&gt;
    &lt;div id="control_div"&gt;&lt;/div&gt;
    &lt;p&gt;&lt;span id='dbgchart'&gt;&lt;/span&gt;&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>And here's a working <a href="http://jsfiddle.net/alex4uthis/ZmVcZ/114/" rel="noreferrer">JSFiddle</a>.</p>

<p>Here the control starts from Jan 1. When I change start range to Jan 2, the graph date starts to show from Feb. I could not identify the reason for this. Can anyone help me in this?  In the end range it is working fine it seems.</p>