Restrict slider range in ChartRangeFilter: Google Charts

Question

I am using google chart's ChartRangeFilter.I want to restrict the slider range to a particular value and prevent the user from changing it(Prevent user from increasing the range value between min and max value but he can slide the overall range. Is there any way to achieve this? Any help is greatly appreciated. Thanks in advance

WhiteHat WhiteHat · Accepted Answer · 2018-07-31T17:48:08

there aren't any standard options to restrict the range in this manner

but you can listen for the 'statechange' event on the filter,
when the max / min values have been reached on the range,
use the setState method to override the start / end values,
and re-draw the control

see following working snippet,
start cannot be moved above 3,
end cannot be moved below 6

google.charts.load('current', {
  packages: ['controls', 'corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0', 'y1', 'y2'],
    [0, 3.0, 5, 4.9],
    [1, 3.1, 5, 4.8],
    [2, 3.2, 5, 4.7],
    [3, 3.3, 5, 4.6],
    [4, 3.4, 5, 4.5],
    [5, 3.5, 5, 4.4],
    [6, 3.6, 5, 4.3],
    [7, 3.7, 5, 4.2],
    [8, 3.8, 5, 4.1],
    [9, 3.9, 5, 4.0],
  ]);

  var chart = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    containerId: 'chart'
  });
  var control = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'control',
    options: {
      filterColumnIndex: 0,
      ui: {
        chartOptions: {
          hAxis: {
            ticks: data.getDistinctValues(0)
          }
        }
      }
    }
  });
  var dashboard = new google.visualization.Dashboard(
    document.getElementById('dashboard')
  );

  google.visualization.events.addListener(control, 'statechange', function (e) {
    var maxStart = 3;
    var minEnd = 6;

    var filterState = control.getState();
    var restrict = false;

    if (e.startChanged) {
      if ((filterState.range.start) > maxStart) {
        filterState.range.start = maxStart;
        restrict = true;
      }
    }
    if (e.endChanged) {
      if ((filterState.range.end) < minEnd) {
        filterState.range.end = minEnd;
        restrict = true;
      }
    }

    if (restrict) {
      control.setState(filterState);
      control.draw();
    }
  });

  dashboard.bind(control, chart);
  dashboard.draw(data);
  window.addEventListener('resize', function () {
    dashboard.draw(data);
  });
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="dashboard">
  <div id="chart"></div>
  <div id="control"></div>
</div>

the only drawback to this approach,
the user will lose grip on the handle when the control is redrawn...

Restrict slider range in ChartRangeFilter: Google Charts

1 Answers