A range Line chart with dual colors. The chart is NOT clickable at the current time.
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>
d1 = [];
d2 = [];
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: {
backgroundGridHlinesCount: 10,
colors: ['transparent','transparent'],
shadow: true,
hmargin: 10,
filled: true,
filledColors: ['transparent', 'red'],
xaxisLabels: [
'', 'Q1', '',
'', 'Q2', '',
'', 'Q3', '',
'', 'Q4', ''
],
xaxis: false,
yaxis: false,
linewidth: 0,
tickmarksStyle: null,
spline: true
}
}).trace();
</script>