New CSS3 animations can be used to great effect with your canvas tags. Updated: This demo was updated on the 20th June 2013 so that now instead of just one switch between charts it repeatedly switches back and forth between charts.
Another update: It now adds the CSS animation to the DIV wrapper that RGraph adds so that the DOM text is moved as well as the canvas.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="RGraph.common.core.js"></script> <script src="RGraph.bar.js"></script>Put this where you want the chart to show up:
<canvas id="cvs" width="600" height="250">
[No canvas support]
</canvas>
This is the code that generates the chart:
<script>
chart = 1;
/**
* Draws the blue bar chart
*/
function drawBar1 ()
{
var bar = new RGraph.Bar({
id: 'cvs',
data: [4,5,3,8,4,9,6,5,3],
options: {
textAccessible: true,
colors: ['blue'],
labels: ['Mal', 'Barry', 'Gary', 'Neil', 'Kim', 'Pete', 'Lou', 'Fred', 'Jobe'],
strokestyle: 'rgba(0,0,0,0)',
backgroundGridAutofitNumvlines: 9
}
}).draw();
}
/**
* Draws the red bar chart
*/
function drawBar2 ()
{
var bar2 = new RGraph.Bar({
id: 'cvs',
data: [4,8,5,4,8,6,3,5,2],
options: {
textAccessible: true,
colors: ['red'],
labels: ['Mal', 'Barry', 'Gary', 'Neil', 'Kim', 'Pete', 'Lou', 'Fred', 'Jobe'],
strokestyle: 'rgba(0,0,0,0)',
backgroundGridAutofitNumvlines: 9
}
}).draw();
}
/**
* The swap function
*/
function swap ()
{
$('#cvs').parent().addClass('animated bounceOutLeft');
setTimeout(function ()
{
RGraph.reset(document.getElementById("cvs"));
if (chart == 2) {
drawBar1();
chart = 1;
} else {
drawBar2();
chart = 2;
}
$('#cvs').parent().removeClass('bounceOutLeft');
$('#cvs').parent().addClass('bounceInLeft');
}, 750)
}
/**
* Start with the first bar chart
*/
drawBar1();
chart = 1;
</script>