I've being using the dragToZoom explorer function to add zoom functionality to my line charts.

explorer: { 
    actions: ['dragToZoom', 'rightClickToReset'],
    axis: 'horizontal',
    keepInBounds: true,
    maxZoomIn: 4.0
}

Fiddle example here.

I also wanted to add a custom zoom where the user would choose a start date and the chart would be zoomed into the period [start date; current date].

I saw that the Annotation Charts offer a method called setVisibleChartRange(start, end) that could do it. However, I tried them on my application and they are not as view pleasing and customizable as Line Charts are (legends, borders, etc).

Is there any way of changing the visible range on line charts?

I've being using the dragToZoom explorer function to add zoom functionality to my line charts.

explorer: { 
    actions: ['dragToZoom', 'rightClickToReset'],
    axis: 'horizontal',
    keepInBounds: true,
    maxZoomIn: 4.0
}

Fiddle example here.

I also wanted to add a custom zoom where the user would choose a start date and the chart would be zoomed into the period [start date; current date].

I saw that the Annotation Charts offer a method called setVisibleChartRange(start, end) that could do it. However, I tried them on my application and they are not as view pleasing and customizable as Line Charts are (legends, borders, etc).

Is there any way of changing the visible range on line charts?

• javascript
• charts
• google-visualization
• linechart

• 1 there are controls you can use to filter any chart -- the ChartRangeFilter is similar to the control at the bottom of an AnnotationChart -- DateRangeFilter is also available... – WhiteHat Commented Apr 12, 2017 at 12:57
• @WhiteHat I had seen these controls. The ChartRangeFilter is the one which is the closest to what the application needs. Do you think I can programmatically change range.start and range.end in its state properties? – Hicaro Commented Apr 12, 2017 at 13:39
• 2 sure, use the setState method --> filter.setState({range: {start: a, end: b}}) – WhiteHat Commented Apr 12, 2017 at 13:51
• That is great! Thank you so much. – Hicaro Commented Apr 12, 2017 at 14:11

1 Answer 1

The best way to do it without using Annotation Charts was following WhiteHat's tip on the ment, adding a CharRangeFilter and changing its state.

As mentioned in Google Developers page, the draw() method needs to be called after changing the state:

The rule of thumb is to perform any change you need directly on the specific ControlWrapper (or ChartWrapper) instance: for example, change a control option or state via setOption() and setState() respectively, and call its draw() method afterward.

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

var chart = new google.visualization.ChartWrapper({
    chartType: 'ComboChart',
    containerId: 'chart_div',
    options: {
        legend: { 
          position: 'bottom', 
          alignment: 'center', 
          textStyle: {
            fontSize: 12
          }
      },
      explorer: {
          actions: ['dragToZoom', 'rightClickToReset'],
          axis: 'horizontal',
          keepInBounds: true
      },
      hAxis: {
          title: 'X'
      },
      pointSize: 3,
      vAxis: {
          title: 'Y'
      }
  }
});

var control = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'control_div',
    options: {
        filterColumnIndex: 0,
        ui: {
            chartOptions: {
                height: 50,
                chartArea: {
                    width: '75%'
                }
            }
        }
    }
});

dash.bind([control], [chart]);

dash.draw(data);

// example of a new date set up
setTimeout(function () {        
    control.setState({range: {
        start: new Date(2016, 6,1),
      end: new Date()
  }});
  control.draw();
}, 3000);

I created a working example on JSFiddle.