Using CSS3 animations with RGraph charts

Share RGraph:   
Posted on 14th November 2012

Summary
There is now a CSS3 animation library bundled with RGraph that allows you to make use of smooth, CSS3 animations and effects.

This is an example of how you can use CSS3 animation effects in conjunction with RGraph charts. The CSS3 animations are applied to the canvas tag by adding a couple of CSS classes to it. Keep in mind that there might be some effects that aren't implemented in older browsers. Also remember that the animations.css file is quite large so you're advised to use compression with it. And/or you could extract the animation effect from the library and add it to your own CSS file - thereby eliminating a lot of unnecessary CSS styles. There's a HOWTO document showing all the available effects here.


[No canvas support]
<div id="canvas-container" style="text-align: center">
    <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
</div>

The example here has little more code to it to get the switching effect, but the code required can be as simple as adding a couple of CSS classes to the canvas tag, as shown above.

See also:

Comments

Add a new comment...