A grouped and stacked SVG Bar chart

This is a grouped and stacked Bar chart. A regular grouped Bar chart is created and then the coordinates of that Bar chart are used to position vertical progress bars (which in reality are actually more Bar charts).

The bars are animated by using the grow() effect - but each grow() effect is delayed by 50 milliseconds which gives it the appearance of being the wave() effect.

This goes in the documents header:

<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.common.tooltips.js"></script>
<script src="RGraph.svg.common.key.js"></script>
<script src="RGraph.svg.bar.js"></script>

Put this where you want the chart to show up:

<div style="padding: 15px">
    <div style="width: 950px; height: 300px" id="cc"></div>
</div>

This is the code that generates the chart: