CSS animations

• CSS3 animations
• Available effects
• External links

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 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: {
            colors: ['Gradient(red:orange)'],
            marginInner: 20,
            textSize: 16,
            xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun']
        }
    }).fadeslidein({frames: 60});
</script>

CSS3 animations

The RGraph download includes with it a set of css3 animations. These are pure CSS 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 in the download archive 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>

Available effects

There are a number of effects that are available in the Animation.css library along with two custom ones that are specific to the RGraph library. You can see the effects that are available listed below.

External links

• CSS3 animations library homepage