A Line chart with color bands
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="950" height="350">
[No canvas support]
</canvas>
This is the code that generates the chart:
<script>
// Data for the chart
data = [80,90,70,90,80,80,70,20,10,60,95,97,90,50,20,85,70,80,80,70,90,80,90,90];
// Configuration for the chart
conf = {
linewidth: 3,
// These are an alternate set of colors (that aren't currently used)
fills: ['#F2D8D9','#F9E7D3','#DCEAD9','#D9E7F4'],
// Comment this line out to use the colors above instead
fills: ['rgba(255,0,0,0.25)','rgba(255,255,0,0.25)','rgba(0,255,0,0.25)','rgba(0,0,255,0.25)'],
xaxisLabels: [
'','Q1\n2014','',
'','Q2\n2014','',
'','Q3\n2014','',
'','Q4\n2014','',
'','Q1\n2015','',
'','Q2\n2015','',
'','Q3\n2015','',
'','Q4\n2015',''
],
filled: true,
backgroundGridColor: '#eee',
backgroundGridVlines: false,
backgroundGridBorder: false,
backgroundGridHlinesCount: 4,
axes: false,
tickmarksStyle: 'circle',
spline: true,
yaxisScaleUnitsPost: '%',
marginLeft: 50,
xaxisTickmarksCount: 7,
yaxisLabelsCount: 4,
yaxiScaleDecimals: 1,
textColor: 'gray'
};
// Get references to the canvas and context
ca = document.getElementById('cvs');
co = ca.getContext('2d');
// First draw the chart so that we can get the scale points
line = drawChart({
data: data,
conf: conf,
clipX: 0,
clipY: 0,
clipW: 1500,
clipH: 500
});
// These are the coordinates that are used for the color bands
y0 = 0;
y1 = line.getYCoord(75);
y2 = line.getYCoord(50);
y3 = line.getYCoord(25);
// Start with a clear canvas
RGraph.clear(line.canvas);
//
// This is the function that draws a Line chart based on the
// configuration that is passed to it.
//
function drawChart (opt)
{
co.save();
// Draw the clipping region
co.rect(
opt.clipX,
opt.clipY,
opt.clipW,
opt.clipH
);
co.clip();
// Draw a chart (because the canvas is clipped only part of it
// is visible)
var line = new RGraph.Line({
id: 'cvs',
data: opt.data,
options: opt.conf
}).set({
colors: ['black'],
filledColors: opt.conf.fills[opt.index]
}).draw();
co.restore();
return line;
}
// Draw the red area
drawChart({data: data, conf: conf, index: 0, clipX: 0, clipY: y0, clipW: 1000, clipH: y1});
// Draw the yellow area
drawChart({data: data, conf: conf, index: 1, clipX: 0, clipY: y1, clipW: 1000, clipH: y2 - y1});
// Draw the green area
drawChart({data: data, conf: conf, index: 2, clipX: 0, clipY: y2, clipW: 1000, clipH: y3 - y2});
// Draw the blue area
drawChart({data: data, conf: conf, index: 2, clipX: 0, clipY: y3, clipW: 1000, clipH: ca.height - y3});</script>