A stepped Line chart that uses the trace2() effect
This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.effects.js"></script>
<script src="RGraph.common.key.js"></script>
<script src="RGraph.bar.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>
line = new RGraph.Line({
id: 'cvs',
data: [
[70,60,80,50,50,60,70,60,50,40,50,50],
[20,30,50,40,30,50,40,30,60,50,10,20]
],
options: {
marginLeft: 45,
marginRight: 100,
backgroundGrid: false,
xaxis: false,
stepped: true,
yaxisScaleUnitsPre: '$',
yaxisScaleUnitsPost: 'K',
yaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
key: ['Credit limit','MTM + AR'],
keyPosition: 'margin',
keyColorShape: 'circle',
linewidth: 3,
shadow: false,
textSize: 14,
tickmarksStyle: null
}
}).trace2();
</script>