Tweet about RGraph
Follow for HTML5 news
Bookmark and share:

# RGraph: HTML5 canvas graph library - Animating your graphs

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.

#### Animation using jQuery

You can if you prefer use an external library for animation, like jQuery.

The graph to the right is animated using jQuery. In the example the width is maintained by placing the canvas within a DIV which has the width/height CSS attributes set.

In this instance, the Google hosted jQuery is used.