Bar and Line charts with switch effect

Requires jQuery

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 container DIV instead of the canvas tag. This way the DIV and everything in it (ie the canvas and the text) is animated.

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#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>

Put this where you want the chart to show up:

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

This is the code that generates the chart: