The solution is to setup update function to calculate new heights of the background bars, to get displayed bars you can use graph.series.active(); you also may like to keep vars in same scope....
so the solution itself:
var maxHeight;
var background_update = function(graph) {
//skip 1st time;
if (maxHeight === undefined) {return;}
var series=graph.series.active();
maxHeight=yScale(get_maximum_all(series));
//console.log(maxHeight);
var red_riskpoint=get_maximum("y",series[0]);
var yellow_riskpoint=get_maximum("y",series[1]);
var green_riskpoint=get_maximum("y",series[2]);
//console.log(graph.series.active());
console.log(yScale(red_riskpoint),yScale(yellow_riskpoint),yScale(green_riskpoint));
// return;
b_red.attr("y", maxHeight - yScale(red_riskpoint)).attr("height", yScale(red_riskpoint));
b_yellow.attr("y", maxHeight - yScale(yellow_riskpoint)).attr("height", Math.abs(yScale(yellow_riskpoint) - yScale(red_riskpoint)));
b_green.attr("y", maxHeight - yScale(green_riskpoint)).attr("height", Math.abs(yScale(green_riskpoint) - yScale(yellow_riskpoint)));
console.log(maxHeight-yScale(green_riskpoint));
};
var get_maximum_all=function(series) {
var max=0;
for (var i in series) {
var stack=series[i].stack;
for (n in stack) {
if (stack[n].y>max) {max=stack[n].y;}
if (stack[n].y0>max) {max=stack[n].y0;}
}
}
return max;
}
var get_maximum=function(tag,object){
var max=0;
for (var i in object.stack) {
if (object.stack[i][tag]>max) {max=object.stack[i][tag];}
}
return max;
}
Rickshaw.Graph.RangeSlider = function(args) {
var element = this.element = args.element;
var graph = this.graph = args.graph;
$(element).slider({
range: true,
min: graph.dataDomain()[0],
max: graph.dataDomain()[1],
values: [
graph.dataDomain()[0],
graph.dataDomain()[1]
],
slide: function(event, ui) {
graph.window.xMin = ui.values[0];
graph.window.xMax = ui.values[1];
graph.update();
// if we're at an extreme, stick there
if (graph.dataDomain()[0] == ui.values[0]) {
graph.window.xMin = undefined;
}
if (graph.dataDomain()[1] == ui.values[1]) {
graph.window.xMax = undefined;
}
}
});
element.style.width = graph.width + 'px';
graph.onUpdate(function() {
var values = $(element).slider('option', 'values');
$(element).slider('option', 'min', graph.dataDomain()[0]);
$(element).slider('option', 'max', graph.dataDomain()[1]);
if (graph.window.xMin == undefined) {
values[0] = graph.dataDomain()[0];
}
if (graph.window.xMax == undefined) {
values[1] = graph.dataDomain()[1];
}
$(element).slider('option', 'values', values);
background_update(graph);
});
}
other code is almost same you placed to fiddle,
my fiddle here
please note, that i not sure how calculate riskpoints, i just tried to get a maximums. I sure you can make riskpoint calculations from viewing the console.log(series)
b_red,b_green,b_yellow it is d3 selections of initialised background bars.