title: Google Charts range filter control for date format
body: <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>