A rotating Bar chart using CSS3 3D transformations
This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.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>
new RGraph.Bar({
id: 'cvs',
data: [4,8,6,8,7],
options: {
xaxisLabels: ['John','Fred','George','Paul','Ringo'],
textAccessible: false
}
}).draw();
// Initially the x/y/z angles are all zero
x = 0;
y = 0;
z = 0;
// This is the spin function that gets called repeatedly and sets the appropriate CSS3 values.
// It calls itself again at the end after a small delay.
mySpinFunc = function ()
{
// Set the appropriate CSS3 properties for WebKit browsers
document.getElementById("cvs").style.WebkitTransform = 'rotate3d(1,0,0, ' + x + 'deg) rotate3d(0,1,0, ' + y + 'deg) rotate3d(0,0,1, ' + z + 'deg)';
// Set the unprefixed CSS3 properties (for Firefox, MSIE 10 etc)
document.getElementById("cvs").style.transform = 'rotate3d(1,0,0, ' + x + 'deg) rotate3d(0,1,0, ' + y + 'deg) rotate3d(0,0,1, ' + z + 'deg)';
// Increment the X/Y/Z angles
x += 3;
y += 3;
z += 3;
// Call ourselves again after a small delay
setTimeout(mySpinFunc, 50);
}
mySpinFunc();
</script>