An example of a 100% stacked Bar chart. The data is manipulated from the original values in order to turn into percentages - but as you can see from the code example shown below - this is a trivial thing to do. The chart is animated using the grow effect.
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: 750px; height: 300px" id="chart-container"></div>This is the code that generates the chart:
<script> // Define the data data = [[4,9,9],[8,6,4],[1,2,5],[5,6,2],[4,8,8],[3,2,5],[4,6,5]]; // Calculate the percentages that the data represents data.forEach(function (v, k, arr) { var total = RGraph.SVG.arraySum(v); for (var i=0; i<v.length; ++i) { v[i] = (v[i] / total) * 100; } }); new RGraph.SVG.Bar({ id: 'chart-container', data: data, options: { marginLeft: 50, colors: ['#c66','#6c6','#66c'], yaxisScaleUnitsPost: '%', xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'], tooltips: [ 'Bob', 'Jerry', 'Ben', 'Bob', 'Jerry', 'Ben', 'Bob', 'Jerry', 'Ben', 'Bob', 'Jerry', 'Ben', 'Bob', 'Jerry', 'Ben', 'Bob', 'Jerry', 'Ben', 'Bob', 'Jerry', 'Ben' ], grouping: 'stacked', hmargin: 20, linewidth:3, yaxisScaleMax: 100, title: 'A 100% Bar chart', shadow: true, xaxis: false, yaxis: false, backgroundGridVlines: false, backgroundGridBorder: false } }).draw(); </script>