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