title: Google Charts - set ChartRangeFilter end range to max following new data
body: <p>I have an application that continuously appends temperature data to a line chart. When new data is appended to the chart, it doesn't show, because the max range of the <code>ChartRangeFilter</code> doesn't include it, even if it was at the far right before the update. In order to show the new data, you have to manually adjust the range filter so it includes the addition.</p>
  
  <p>I have tried to figure out a solution to this problem, but with no luck so far.
  For some reason I cannot call methods of my <code>chart1</code> instance outside the <code>drawChart</code> function. (see code below)</p>
  
  <p><em>A highly important criteria for the problem is that it should only adjust itself to the far right if it already was at the far right before the update.</em></p>
  
  <p>Here is the relevant Javascript code:</p>
  
  <pre><code>google.load('visualization', '1', {'packages':['corechart', 'controls', 'linechart']});
  google.setOnLoadCallback(drawChart);
  
  var chart1;
  function drawChart() 
  {
      // Create the dataset (DataTable)
      data = new google.visualization.DataTable();
      data.addColumn('date', 'Date');
      data.addColumn('number', 'Temperature');
  
      // Create a dashboard.
      dash_container = document.getElementById('dashboard'),
      dashboard = new google.visualization.Dashboard(dash_container);
  
      for (var i = 0; i &lt; all_history.length; i ++)
      {
          var obj = all_history[i];
          data.addRow([new Date(obj.time.value), obj.temperature.value]);
      }
  
      chart1 = new google.visualization.ChartWrapper(
      {
              chartType : 'LineChart',
              containerId : 'chart1',
              legend: { position: 'bottom' },
              vAxis: 
              {
                  maxValue: 40,
                  minValue: 10
              }
      });
  
      // Initial range limits
      var start = new Date(new Date().setTime(new Date().getTime() - 300000));
      var end = new Date();
  
      control1 = new google.visualization.ControlWrapper(
      {
              controlType: 'ChartRangeFilter',
              containerId: 'control1',
              options: 
          {
                  filterColumnLabel: 'Date'
              },
          ui:
          {
              //snapToData: true
          },
          state: 
          {
                  range: 
                  {
                          start: start,
                          end: end
                  }
              }
      });
  
      dashboard.bind(control1, chart1);
  
      dashboard.draw(data);
  }
  
  function addToChart(chart, item)
  {
      data.addRow(item);
      dashboard.draw(data);
      return;
      // code below this is full of bugs
  
  
      resize = false;
  
      //chart1.clearChart(); 
      //console.log(chart1.getHAxisValue(400));
      //console.log(chart1.getXLocation(400));
      // ALL OF THE ABOVE CALLS THROWS AN ERROR -&gt; WHY?
  
      if (control1.getState().range.end == chart1.hAxis.maxValue)
      {
          resize = true;
      }
  
  
      if (resize)
      {
          control1.setState({start: control1.getState().range.start, end:      chart1.hAxis.maxValue})
      }
  }
  </code></pre>