A rotating Bar chart using CSS3 3D transformations

[No canvas support]

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>