A range Line chart with dual colors. This range chart is combined with the drawing API Poly object so that the range can be given a tooltip.
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.effects.js"></script> <script src="RGraph.common.dynamic.js"></script> <script src="RGraph.common.tooltips.js"></script> <script src="RGraph.dynamic.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 d1 = [];
var d2 = [];
var val = 47;
// Create the data
for (var i=0; i<100; i+=1) d1[i] = RGraph.random(45,55);
for (var i=0; i<100; i+=1) d2[i] = RGraph.random(25,35);
var line = new RGraph.Line({
id: 'cvs',
data: [d1, d2],
options: {
colors: ['gray','gray'],
backgroundGridAutofitNumhlines: 10,
hmargin: 10,
filled: true,
filledRange: true,
filledRangeThreshold: 0,
filledRangeThresholdColors: ['rgba(255,0,0,0.5)', 'rgba(0,0,255,0.5)'],
labels: [
'', 'Q1', '',
'', 'Q2', '',
'', 'Q3', '',
'', 'Q4', ''
],
numxticks: 8,
linewidth: 1,
ymax: 60,
tickmarks: null,
textAccessible: true
}
}).trace();
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: {
fillstyle: 'rgba(0,0,0,0)',
strokestyle: 'rgba(0,0,0,0)',
tooltips: ['The range chart'],
highlightFill: 'rgba(255,255,255,0.3)'
}
}).draw();
};
</script>