A switch animation effect

View the bare-bones version of this demo with any interactive features or animations enabled

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):