By using the Poly drawing API object with a filled range chart you can make the filled range clickable.
This goes in the documents header:<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="RGraph.common.core.js"></script> <script src="RGraph.common.dynamic.js"></script> <script src="RGraph.common.tooltips.js"></script> <script src="RGraph.common.effects.js"></script> <script src="RGraph.drawing.poly.js"></script> <script src="RGraph.line.js"></script>Put this where you want the chart to show up:
<canvas id="cvs" width="600" height="250">
[No canvas support]
</canvas>
This is the code that generates the chart:
<script>
window.onload = function ()
{
var line = new RGraph.Line({
id: 'cvs',
data: [
[3,4,6,5,2,4,5,5,6,8,7,4,8,9,8,6,5,2,5,4],
[12,13,15,16,12,13,15,14,21,22,20,13,15,16,18,19,16,15,13,18]
],
options: {
filled: true,
filledRange: true,
fillstyle: 'red',
colors: ['black'],
linewidth: 1,
numxticks: 19,
ymax: 50,
tickmarks: null,
backgroundGridAutofitNumvlines: 19,
textAccessible: true,
scaleZerostart: true
}
}).trace(null, drawPoly);
function drawPoly ()
{
/**
* Extract the coords from the Line chart coords
*/
var coords = [];
for (var i=0; i<(line.coords.length / 2); i+=1) {
coords.push(line.coords[i]);
}
for (var i=(line.coords.length - 1); i>=(line.coords.length / 2);i-=1) {
coords.push(line.coords[i]);
}
var poly = new RGraph.Drawing.Poly({
id: 'cvs',
coords: coords,
options: {
strokestyle: 'rgba(0,0,0,0)',
fillstyle: 'rgba(0,0,0,0)',
tooltips: ['The tooltip!'],
highlightFill: 'rgba(255,255,255,0.5)'
}
}).draw();
}
};
</script>