A Line chart with a custom line
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="800" height="250">
[No canvas support]
</canvas>
This is the code that generates the chart:
<script>
var color = '#E9B34E';
var line = new RGraph.Line({
id: 'cvs',
data: [
[7000,26000,11000,16000,28000,13000,23000,28500,null,null,null,null],
[null,null,null,null,null,null,null,28500,11000,14000,9000,10000],
],
options: {
colors: ['black',color],
shadow: false,
axes: false,
backgroundGridVlines: false,
backgroundGridHlinesCount: 3,
backgroundGridBorder: false,
yaxisTickmarksCount: 3,
yaxisLabelsCount: 3,
yaxisScaleMax: 30000,
marginTop: 50,
marginLeft: 100,
yaxisScaleUnitsPre: '$',
linewidth: 3,
xaxisLabels: ['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC'],
tickmarksStyle: 'dot',
tickmarksStyleDotStroke: 'white',
tickmarksStyleDotLinewidth: 3,
tickmarksStyleDotStroke: 'white',
tickmarksSize: 7,
textSize: 14,
textFont: 'Segoe UI',
shadow: true,
shadowOffsetx: 1,
shadowOffsety: 1,
shadowBlur: 2
}
}).on('draw', function (obj)
{
// Draw the vertical line
var x = obj.coords2[1][7][0];
var y = obj.coords2[1][7][1];
// Draw the vertical line above/below the 8th point
RGraph.path2(obj.context, 'b m % 25 l % % s %', x, x, y - 10, color);
RGraph.path2(obj.context, 'b m % % l % 230 s %', x, y + 10,x, color);
obj.context.fillStyle = color;
// Draw the text above the line
RGraph.text2(obj, {
x: x,
y: 25,
text: 'TODAY',
size: 8,
halign: 'center',
bold: true,
interactive: true // ???
});
// Draw the text above the line
RGraph.text2(obj, {
color: 'black',
x: 65,
y: 30,
text: 'REVENUE',
size: 14,
halign: 'center',
bold: true
});
}).trace2({frames: 50});
</script>