title: Google Chart API Control range and snapToData issues
body: <p>Using google charts API with line chart controlled by range finder.<br>I am stuck with two annoying issues: <br></p>
  
  <ol>
  <li>The control has extra space before and after the data values it was set to follow, leaving an ugly space the control can slide to.</li>
  <li>I can not seem to get the control to snap to data value. </li>
  </ol>
  
  <p>If you can give me a pointer what I am doing wrong I will appreciate it a lot.<br>
  I set a JSfiddle here: <a href="http://jsfiddle.net/Db4fm/2/" rel="nofollow">http://jsfiddle.net/Db4fm/2/</a><br><br></p>
  
  <p>Thank you very much!</p>
  
  <h2>JS</h2>
  
  <pre><code>function drawChart() {
  var activity_breakdown = [
      ['Text Index', 'Numeric Index', 'totals', 'Value 1', 'Value 2', 'Value 3', 
       'Value 4', 'Value 5', 'Value 6', 'Value 7'],
      ['W15', 1, 13, 2, 0, 20, 2, 1, 0, 0],
      ['W16', 2, 20, 0, 1, 10, 3, 0, 0, 2],
      ['W17', 3, 19, 3, 0, 20, 2, 0, 2, 0],
      ['W18', 4, 31, 0, 2, 10, 4, 1, 0, 3],
      ['W19', 5, 11, 1, 0, 10, 2, 0, 3, 0],
      ['W20', 6, 26, 0, 0, 10, 6, 0, 0, 4],
      ['W21', 7, 39, 2, 0, 30, 2, 1, 2, 0],
      ['W22', 8, 41, 0, 3, 10, 7, 0, 0, 0],
      ['Today', 9, 44, 0, 1, 20, 2, 1, 0, 5]
  ];
  
  // Data table
  var data1 = google.visualization.arrayToDataTable(activity_breakdown);
  
  // Chart
  var chart1 = new google.visualization.ChartWrapper({
      chartType: 'ColumnChart',
      containerId: 'chart_activity',
      dataTable: data,
      options: {
          width: 950,
          height: 300,
          chartArea: {
              left: 40,
              top: 20,
              width: 700,
              height: 250
          },
          legend: {
              position: 'right',
              textStyle: {
                  fontSize: 13
              }
          }
      },
      view: {
          columns: [0, 3, 4, 5, 6, 7, 8, 9]
      }
  });
  
  var control1 = new google.visualization.ControlWrapper({
      'controlType': 'ChartRangeFilter',
          'containerId': 'control_activity',
          'options': {
          // Filter by the date axis.
          'filterColumnIndex': 1,
              'ui': {
              'chartType': 'LineChart',
                  'snapToData': true, // this bugger is not working
              'chartOptions': {
                  width: 950,
                  height: 50,
                  chartArea: {
                      left: 40,
                      top: 0,
                      width: 700,
                      height: 50
                  },
                      'hAxis': {
                      textPosition: 'none'
                  }
              },
                  'chartView': {
                  'columns': [0, 2]
              },
                  'minRangeSize': 1
          }
      },
          'state': {
          'range': {
              'start': 7,
                  'end': 8
          }
      }
  });
  
  var dashboard1 = new google.visualization.Dashboard(
  document.getElementById('dashboard_activity'));
  
  // Draw
  dashboard1.bind(control1, chart1);
  dashboard1.draw(data1);
  
  google.visualization.events.addListener(control1, 'statechange', function () {
      var v = control1.getState();
      document.getElementById('dbgchart').innerHTML = v.range.start + ' -&gt; ' +
      v.range.end;
      return 0;
  });
  
  // FSM knows why but without this line this line the code will not run...
  var data = new google.visualization.DataTable();
  }
  
  google.load('visualization', '1.1', {
      packages: ['corechart', 'controls']
  });
  google.setOnLoadCallback(drawChart);
  </code></pre>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;div id="dashboard_activity"&gt;
      &lt;div id="chart_activity"&gt;&lt;/div&gt;
      &lt;div id="control_activity"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;p&gt;Debug range: &lt;span id="dbgchart"&gt;Init&lt;/span&gt;&lt;/p&gt;
  </code></pre>