An SVG chart using CSS3 animations

RGraph includes a CSS3 based animation library that you can use to animate your chart. CSS3 animation is commonly smoother and faster than JavaScript based animation (eg jQuery). You can use the selector below to browse through the animations that are available.


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 id="chart-container" style="600px; height: 250px; display: inline-block"></div>
This is the code that generates the chart:
<script>
    var bar = new RGraph.SVG.Bar({
        id: 'chart-container',
        data: [4,5,3,8,4,9,6],
        options: {
            xaxisLabels: ['Mon','Tue','Wed','Thur','Fri','Sat','Sun']
        }
    }).draw();


    // The swap function
    function selectAnimation(effect)
    {
        var div = document.getElementById('chart-container');

        div.className = '';
        div.className = 'animated ' + effect;
    }
</script>