Bar and Line charts with a switch effect

There are numerous ways of switching between charts - some of which have examples in the download archive. Here's a nice example of a CSS transition.

View the bare-bones, stripped-down version of this demo

Requires jQuery

[No canvas support] [No canvas support]

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

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.

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 - it should be placed AFTER the canvas tag(s):