CSS animations and effects

Summary: Like the canvas libraries the SVG libraries have their own CSS effects and animations library. You can also use the Animate.css library for pure CSS3 animations

The CSS effects library provides you with various wipe-ins and wipe-outs that you can use with your charts. There's a list of available effects listed below. To use them you need to include the library and then, instead of calling the draw() function, call the applicable effect function. There's an example of some code below with the little bit highlighted in green that triggers the effect instead of the regular draw() function. 

<script>
    new RGraph.SVG.Bar({
        id: 'chart-container',
        data: [4,8,6,6,3,5,2],
        options: {
            xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Fruday','Saturday','Sunday'],
            marginInner: 20,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            yaxis: false,
            colors: ['Gradient(red:orange)']
        }
    }).fadeslidein({frames: 60});
</script>

CSS3 animations


The RGraph download includes with it a set of CSS3 animations. These are purely CSS based and only require you to include a single extra CSS library. The tag to include the library is shown below and then you can add the animated class to your <div> tag, along with the desired effect class too. There's a Bar chart demo that shows the available effects.

The code to include the Animate library: 
<link rel="stylesheet" href="animate.css" type="text/css" media="screen" />
And an example <div> tag (the chart container): 
<div style="width: 650px; height: 300px; display: inline-block" id="chart-container" class="animated expand"></div>

External links