A Bar and Line chart with a switch effect

Note that this effect doesn't use the textAccessible option. This is because the effect moves the whole canvas around - not just what's on it.

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 based animation but by using JavaScript to apply CSS properties. The CSS transitions which are also specified on the canvas then take care of doing the animating.

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

If rewritten it might be possible by applying the CSS to the textAccessible container DIV instead of the canvas tag. This way the DIV and everything in it (ie the canvas and the text) is animated.

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

<div id="container">
    <canvas id="cvs1" width="600" height="250">[No canvas support]</canvas>
    <canvas id="cvs2" width="600" height="250">[No canvas support]</canvas>
</div>