# CSS3 animations

New CSS3 animations can be used to great effect with your canvas tags. Updated: This demo was updated on the 20th June 2013 so that now instead of just one switch between charts it repeatedly switches back and forth between charts.

Another update: It now adds the CSS animation to the DIV wrapper that RGraph adds so that the DOM text is moved as well as the canvas.

This goes in the documents header:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="RGraph.common.core.js"></script>
    <script src="RGraph.bar.js"></script>

Put this where you want the chart to show up:

    <canvas id="cvs" width="600" height="250">
        [No canvas support]
    </canvas>

This is the code that generates the chart:

    <script>
        chart = 1;

        /**
        * Draws the blue bar chart
        */
        function drawBar1 ()
        {
            var bar = new RGraph.Bar({
                id: 'cvs',
                data: [4,5,3,8,4,9,6,5,3],
                options: {
                    textAccessible: true,
                    colors: ['blue'],
                    labels: ['Mal', 'Barry', 'Gary', 'Neil', 'Kim', 'Pete', 'Lou', 'Fred', 'Jobe'],
                    strokestyle: 'rgba(0,0,0,0)',
                    backgroundGridAutofitNumvlines: 9
                }
            }).draw();
        }

        /**
        * Draws the red bar chart
        */
        function drawBar2 ()
        {
            var bar2 = new RGraph.Bar({
                id: 'cvs',
                data: [4,8,5,4,8,6,3,5,2],
                options: {
                    textAccessible: true,
                    colors: ['red'],
                    labels: ['Mal', 'Barry', 'Gary', 'Neil', 'Kim', 'Pete', 'Lou', 'Fred', 'Jobe'],
                    strokestyle: 'rgba(0,0,0,0)',
                    backgroundGridAutofitNumvlines: 9
                }
            }).draw();
        }

        /**
        * The swap function
        */
        function swap ()
        {
            $('#cvs').parent().addClass('animated bounceOutLeft');
            setTimeout(function ()
            {
                RGraph.reset(document.getElementById("cvs"));

                if (chart == 2) {
                    drawBar1();
                    chart = 1;
                } else {
                    drawBar2();
                    chart = 2;
                }

                $('#cvs').parent().removeClass('bounceOutLeft');
                $('#cvs').parent().addClass('bounceInLeft');
            }, 750)
        }

        /**
        * Start with the first bar chart
        */
        drawBar1();
        chart = 1;
    </script>