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