An SVG chart using CSS3 animations
RGraph includes a CSS3 based animation library that you can use to animate your chart. CSS3 animation is commonly smoother and faster than JavaScript based animation (eg jQuery). You can use the selector below to browse through the animations that are available.
Select effect...
flash
bounce
shake
tada
swing
wobble
wiggle
pulse
flip
flipInX
flipOutX
flipInY
flipOutY
fadeIn
fadeInUp
fadeInDown
fadeInLeft
fadeInRight
fadeInUpBig
fadeInDownBig
fadeInLeftBig
fadeInRightBig
fadeOut
fadeOutUp
fadeOutDown
fadeOutLeft
fadeOutRight
fadeOutUpBig
fadeOutDownBig
fadeOutLeftBig
fadeOutRightBig
bounceIn
bounceInDown
bounceInUp
bounceInLeft
bounceInRight
bounceOut
bounceOutDown
bounceOutUp
bounceOutLeft
bounceOutRight
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
lightSpeedIn
lightSpeedOut
hinge
rollIn
rollOut
expand
contract
This goes in the documents header:
<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.bar.js"></script>
Put this where you want the chart to show up:
<div id="chart-container" style="600px; height: 250px; display: inline-block"></div>
This is the code that generates the chart: