CSS animations and effects

Share RGraph:  

Summary
Like the canvas libraries, the SVG libraries has its own CSS effects and animations library. You can also use the Animate.css library for pure CSS3 animations

The CSS effects library provides 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 the code below with the little bit highlighted in green that triggers the effect instead of the regular draw() function.

Note:
Elements on your page can significantly affect an animation in a bad way. So its for this reason that the Facebook widget is delayed by approximately 1.5 seconds to allow time for the effect to run.

<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'],
            hmargin: 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 an extra single CSS library. The tag to include the library is shown below, and then you just 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 CSS 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"></div>

External links