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="RGraph.common.core.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> 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, filledColors: 'red', colors: ['black'], linewidth: 1, xaxisTickmarksCount: 19, yaxisScaleMax: 50, tickmarksStyle: null, backgroundGridVlinesCount: 19 } }).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: { colorsStroke: 'rgba(0,0,0,0)', filledColors: 'rgba(0,0,0,0)', tooltips: ['The tooltip!'], highlightFill: 'rgba(255,255,255,0.5)' } }).draw(); } </script>