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

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