An SVG 100% Bar chart

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: {
            gutterLeft: 50,
            colors: ['#c66','#6c6','#66c'],
            yaxisUnitsPost: '%',
            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,
            yaxisMax: 100,
            title: 'A 100% Bar chart',
            shadow: true,
            xaxis: false,
            yaxis: false,
            backgroundGridVlines: false,
            backgroundGridBorder: false
        }
    }).draw();
</script>