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?
source to share
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
(orChartWrapper
): for example, change a control parameter or state throughsetOption()
andsetState()
accordingly, and call its methoddraw()
.
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 .
source to share