A stacked Bar chart showing income/expenditure
This goes in the documents header:
<script src="RGraph.common.core.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>
data1 = [[2,5,9],[4,2,6],[6,5,8]];
data2 = [-4,-5,-20];
// Top bar chart
bar1 = new RGraph.Bar({
id: 'cvs',
data: data1,
options: {
shadow: false,
colorsStroke: 'rgba(0,0,0,0)',
axes: false,
yaxisLabels: false,
colors: ['blue','pink','aqua'],
hmargin: 25,
colorsStroke: 'rgba(0,0,0,0)',
backgroundGrid: false,
marginBottom: 125,
grouping: 'stacked',
yaxisScaleMax: 20
}
}).wave();
// Bottom bar chart
bar2 = new RGraph.Bar({
id: 'cvs',
data: data2,
options: {
shadow: false,
colors: ['red'],
hmargin: 25,
xaxisPosition: 'center',
backgroundGrid: false,
yaxisScaleMax: 20
}
}).wave();
</script>