Custom scale for google chart

Question

Custom scale for google chart

I am using dragToZoom

explorer function to add zoom functionality to my line charts.

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

Sample script here .

I also wanted to add a custom scale for when the user selected a start date and the graph will be zoomed to the period [start date; The current date].

I saw Chart Annotations offer a method called setVisibleChartRange(start, end)

that could do this. However, I have tried them in my application and they are not as pleasing and customizable as Line Charts (legends, borders, etc.).

Is there a way to change the visible range in line charts?

+3

javascript google-visualization charts linechart

Hicaro Apr 12 17 at 11:50

source to share

1 answer

Hicaro · Accepted Answer · 2017-04-13T15:56:01+0000

The best way to do this without using annotation charts is to follow WhiteHat's recommendation to comment by adding a CharRangeFilter and changing its state.

As mentioned on the Google Developers page , after changing the state, you need to call the method draw()

:

A rule of thumb is to make any change you need directly on a specific instance ControlWrapper

(or ChartWrapper

): for example, change a control parameter or state through setOption()

and setState()

accordingly, and call its method draw()

.

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 JSFiddle example .

Custom scale for google chart

More articles: