CSS 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 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','Friday','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
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.
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.