An SVG Bar chart showing income/expenditure
This goes in the documents header:
<script src="RGraph.svg.common.core.js" ></script>
<script src="RGraph.svg.bar.js"></script>
Put this where you want the chart to show up:
<div style="width: 650px; height: 250px" id="cc"></div>
This is the code that generates the chart:
<script>
var data1 = [[4,8,6],[1,5,8],[4,9,6]],
data2 = [[-5,-5,-6],[-1,-4,-9],[-2,-3,-5]];
RGraph.SVG.GLOBALS.hmargin = 25;
RGraph.SVG.GLOBALS.hmarginGrouped = 5;
RGraph.SVG.GLOBALS.yaxisMax = 10;
RGraph.SVG.GLOBALS.yaxisMin = 'mirror';
new RGraph.SVG.Bar({
id: 'cc',
data: data1,
options: {
xaxis: false,
yaxis: false,
colors: [
'Gradient(black:#aaa:black)',
'Gradient(black:#aaa:black)',
'Gradient(black:#aaa:black)'
]
}
}).wave();
new RGraph.SVG.Bar({
id: 'cc',
data: data2,
options: {
yaxisLabels: false,
backgroundGrid: false,
colors: [
'Gradient(red:#faa:red)',
'Gradient(red:#faa:red)',
'Gradient(red:#faa:red)'
]
}
}).wave();
</script>
« Back