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>