CODEWITHSUNDEEP
javascriptchartsgoogle-visualizationlinechart
Hicaro
Hicaro

Reputation: 687

Custom zoom to Google line chart

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?

Upvotes: 4

Views: 4310

Answers (1)

Hicaro
Hicaro

Reputation: 687

The best way to do it without using Annotation Charts was following WhiteHat's tip on the comment, 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.

Upvotes: 7

Related Questions