A switch animation effect

Requires jQuery

It's a nice transition effect where one chart blends into another with a "folding-away" type motion. The other chart is shown in the reverse direction. The effect is not animated by using JavaScript animation but by using JavaScript to apply CSS properties. The CSS transitions that are also specified on the canvas then take care of doing the animating.

The charts themselves are quite straightforward - with the Line chart having a larger linewidth and bigger tickmarks than normal.

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.line.js"></script>
<script src="RGraph.bar.js"></script>

<style>
    div#canvas-container {
        position: relative;
        width: 600px;
        height: 250px;
    }
    
    div#canvas-container canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 600px;
        height: 250px;
        background-color: white;
        transition: all 1s;
        opacity: 1;
    }
    
    div#canvas-container canvas#cvs1 {
        top: 125px;
        left: 300px;
        width: 0;
        height: 0;
        opacity: 0;
        transform: rotate(90deg);
    }
</style>

Put this where you want the chart to show up:

<div id="canvas-container" style="display: inline-block; float: right">
    <canvas id="cvs1" width="600" height="250">[No canvas support]</canvas>
    <canvas id="cvs2" width="600" height="250">[No canvas support]</canvas>
</div>

This is the code that generates the chart - it should be placed AFTER the canvas tag(s):

<script>
    // First create the Bar chart but don't call the draw() function.
    bar = new RGraph.Bar({
        id: 'cvs1',
        data: [4,8,12],
        options: {
            colors: ['#5690C9'],
            marginInner: 25,
            colorsStroke: 'transparent',
            textSize: 16,
            titleSize: 12,
            yaxisTickmarksCount: 0,
            xaxisTickmarksCount: 0,
            xaxis: false,
            yaxis: false,
            shadow: false,
            title: 'A Bar chart (click to switch to the Line chart)',
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            xaxisLabels: ['John','Fred','Lucy']
        }

    }).draw();

    // Create the Line chart with no X-axis
    line = new RGraph.Line({
        id: 'cvs2',
        data: [
            [1,6,4],
            [5,3,8]
        ],
        options: {
            colors: ['#B71A1A','#54A4CF'],
            
            // Use a custom tickmark function so that we can draw the mark manually
            tickmarksStyle: function myTick (obj, data, value, index, x, y, color, prevX, prevY)
            {
                // This is an RGraph function for drawing paths on the canvas. As of
                // version 5.02 you can use the RGraph.path() function instead if you
                // prefer.
                obj.path(
                    'b a % % % % % false f %',
                    x, y, 15, 0, 2 * Math.PI, false,
                    color
                );
            },

            linewidth: 10,
            shadow: false,
            xaxisLabels: ['John','Fred','Lucy'],
            title: 'A Line chart (click to switch to the Bar chart)',
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            xaxis: false,
            marginInner: 25,
            textSize: 16,
            textColor: '#000',
            titleSize: 12,
            yaxisColor: '#999'
        }
    }).draw();




    // This is the click event handler that swaps the canvas tag width/height/opacity
    // CSS properties. It's added using jQuery to BOTH canvas tags.
    $('canvas').click(function (e)
    {
        var id = e.target.id;

        // If the canvas that was clicked on was cvs1 then do this
        // (hide cvs1 and show cvs2)
        if (id === 'cvs1') {
            $('#cvs1').css({
                width: 0,
                height: 0,
                top: '125px',
                left: '300px',
                opacity: 0,
                transform: 'rotate(180deg)'
            });

            $('#cvs2').css({
                width: '600px',
                height: '250px',
                top: 0,
                left: 0,
                opacity: 1,
                transform: 'rotate(0)'
            });




        // If the canvas that was clicked on was cvs2 then do this
        // (hide cvs2 and show cvs1)
        } else {

            $('#cvs2').css({
                width: 0,
                height: 0,
                top: '125px',
                left: '300px',
                opacity: 0,
                transform: 'rotate(180deg)'
            });

            $('#cvs1').css({
                width: '600px',
                height: '250px',
                top: 0,
                left: 0,
                opacity: 1,
                transform: 'rotate(0)'
            });
        }
    });
</script>