Bookmark and share:
Bookmark with delicious tweet this site Post to Google Buzz! Post to Facebook Share on FriendFeed Stumble! this site

RGraph: HTML5 canvas graph library - Animating your graphs

[No canvas support]

Animating your graphs is a relatively easy affair, whilst not being supported natively as it would only serve to over-complicate the RGraph libraries. The way to do it is to use the function RGraph.Clear(canvas), passing it your canvas object that is returned by document.getElementById(). By default this will cover the canvas in white. You can change this by passing it the color you want it to use as the second (optional) argument. You could even use a gradient if you wanted. Then you can simply redraw the entire graph.

One thing you should note, is that you may have to specify the scale manually, to prevent it from changing from frame to frame. This can be done by using the chart.ymax property.

You can review the source of this page if you need further help. Two global variables are set - the number of frames and the current frame number (which starts at one). The graphs are then drawn with appropriate data (ie the data multiplied by the frame number over the total number of frames). If the frame number is less than the total number of frames, the frame number is incremented and the function (window.onload) is called again after a small delay.