This is a variation on the already existing nested Bar chart, this one with the nested Bar chart being grouped.
This goes in the documents header:<script src="RGraph.common.core.js"></script> <script src="RGraph.common.key.js"></script> <script src="RGraph.line.js"></script>Put this where you want the chart to show up:
<canvas id="cvs" width="700" height="250">
[No canvas support]
</canvas>
This is the code that generates the chart:
<script>
// The "master" inner data
data_inner = [[4,2,5],[6,8,4],[4,8,9],[3,5,2],[1,5,5],[4,8,8],[6,3,5]];
data_outer = [];
// The totalled "outer" data
data_inner.forEach(function (v, k, arr)
{
data_outer[k] = RGraph.arraySum(v);
});
var outer = new RGraph.Bar({
id: 'cvs',
data: data_outer,
options: {
labels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
colors: ['Gradient(#eee:#aaa)'],
backgroundGridVlines: false,
backgroundGridBorder: false,
textSize: 12,
shadow: false,
strokestyle: 'rgba(0,0,0,0)',
textAccessible: true,
noaxes: true,
labelsAbove: true,
labelsAboveUnitsPost: 'kg',
unitsPost: 'kg',
gutterLeft: 50
}
}).grow()
var inner = new RGraph.Bar({
id: 'cvs',
data: data_inner,
options: {
colors: ['red','green','blue'],
key: ['Johnny','Rufus','Larna'],
keyPosition: 'gutter',
backgroundGrid: false,
textSize: 12,
shadow: false,
strokestyle: 'rgba(0,0,0,0)',
textAccessible: true,
noaxes: true,
ymax: outer.scale2.max,
hmargin: 10,
gutterLeft: outer.get('gutterLeft'),
labelsAbove: true,
labelsAboveColor: '#333',
labelsAboveSize: 8,
ylabels: false
}
}).wave()
</script>