A spline Line chart
This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.tooltips.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:
data1 = [4,6,12,16,8,4,2,8,18,16,14,16];
data2 = [2,4,8,4,2,6,6,12,8,10,6,8];
myLine = new RGraph.Line({
id: 'cvs',
data: [data1, data2],
options: {
xaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
tickmarksStyle: null,
marginLeft: 40,
marginRight: 15,
marginBottom: 30,
colors: ['red', 'black'],
yaxisScaleUnitsPost: '%',
linewidth: 5,
marginInner: 15,
textColor: '#333',
backgroundGridVlinesCount: 11,
backgroundGridVlines: false,
backgroundGridBorder: false,
axes: false,
title: 'An example Line chart',
titleSize: 15,
titleBold: true,
axesColor: '#666',
textColor: '#666',
spline: true
}
}).draw();
// Use the trace()
animation to show the chart
myLine.set({
tooltips: [
'<b>January</b><br />Started off the year quite averagely',
'<b>February</b><br />Better than January, rising quite nicely',
'<b>March</b><br />March was quite a spike',
'<b>April</b><br />Rising very impressively',
'<b>May</b><br />Dropping after the last two month spike',
'<b>June</b><br />Still dropping',
'<b>July</b><br />The fall is beginning to subside, but still dropping',
'<b>August</b><br />A good rise after the fall',
'<b>September</b><br />A very good peak',
'<b>October</b><br />The peak is now subsiding',
'<b>November</b><br />Still subsiding',
'<b>December</b><br />Rising again after the last fall',
'<b>January</b><br />Started off the year quite averagely as with Robert',
'<b>February</b><br />Rising as with Robert',
'<b>March</b><br />Not as good as Robert, but OK',
'<b>April</b><br />Dropping after the peak',
'<b>May</b><br />The low point as with last year',
'<b>June</b><br />Rising higher than Robert',
'<b>July</b><br />Consistent with last month',
'<b>August</b><br />A nice high point',
'<b>September</b><br />A low point',
'<b>October</b><br />A nice rise',
'<b>November</b><br />Falling for Autumn...',
'<b>December</b><br />Rising again for Christmas'
]
}).trace2();
</script>