Google doesn't supply a function to achieve this by default, but you have pretty good tools.
I've made use of their data.getFilteredRows([{column:X, minValue:XY, maxValue:YY}])
, by simply creating two sliders (like your picture), adding a listener to whenever any of the two are "changed on", checking the minValue and maxValue of both, passing all four values into a function and then setting the view of another chart to the returned rows.
My listeners looks like this
google.visualization.events.addListener(control, 'statechange', function () {
stateChangeFunction();
});
The stateChangeFunction()
looks like this
function stateChangeFunction() {
var lowFilter1 = control.getState().lowValue;
var highFilter1 = control.getState().highValue;
var lowFilter2 = control2.getState().lowValue;
var highFilter2 = control2.getState().highValue;
customFilterChart.setView({
'rows': customFilter(lowFilter1, highFilter1, lowFilter2, highFilter2)
});
customFilterChart.draw();
};
It simply reads the high and low value of both sliders, and then sets the view of my customFilteredChart to the rows that are returned by this function
function customFilter(low1, high1, low2, high2) {
var rows = []
//Using googles own getFilteredRows
rows = data.getFilteredRows([{
column: 1,
minValue: low1,
maxValue: high1
}]);
//Then doing the same with the other two values.
rows = rows.concat(data.getFilteredRows([{
column: 1,
minValue: low2,
maxValue: high2
}]));
//Removing duplicate rows to avoid displaying them twice.
var uniqueRows = rows.reduce(function(a,b){if(a.indexOf(b)<0)a.push(b);return a;},[]);
return uniqueRows
}
Also I'd like to credit Christian Landgren for this wonderful reply.
And finally, here is the fiddle I made it in: Fiddle