Use Google Chrome to see the video (a WebM video).
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>
/**
* If the browser is Chrome the element that spins is a WebM video. If not then it's an RGraph Bar chart.
*/
if (RGraph.ISCHROME) {
document.write('<video id="myElement" src="../video/video.webm" controls autoplay loop ></video>');
} else {
document.write('<canvas id="myElement" width="600" height="250">[No canvas support]</canvas>');
var bar = new RGraph.Bar({
id: 'myElement',
data: [4,8,6,8,7],
options: {
labels: ['John','Fred','George','Paul','Ringo']
}
}).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("myElement").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("myElement").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>