Animating properties with the animate function

• Introduction
• Example

Introduction

The canvas libraries have had an animate function for some time now that can be used to animate the RGraph properties - much like how the jQuery animate function will animate CSS properties. Well, now the SVG libraries have an animate function too. The example below shows it to you in action, but simply put, this function will allow you to animate any of the numeric RGraph properties. So for example the margin properties, the linewidth, text sizes etc. You can see this on the example combined Bar chart and Line chart below. The animation is entirely achieved by using the animate function and you can see the source code that's necessary below the chart. On this particular example - depending on the size of your browser - you may see the chart flip as the margin sizes change. This happens because the margin sizes are too large for a smaller SVG tag.

Example

The code for the chart is shown below.

<!-- Include the relevant libraries -->
<script src="RGraph.svg.common.core.js" ></script>
<script src="RGraph.svg.common.fx.js" ></script>
<script src="RGraph.svg.bar.js" ></script>
<script src="RGraph.svg.line.js" ></script>

<!-- Define the DIV tag that will hold the chart and center align it -->
<div style="text-align: center">
    <div style="width: 80%; height: 300px" id="cc"></div>
</div>


<script>
    //
    // First create the Bar chart. The margins are initially set
    // such that they're each half the width (or height) of
    // the SVG. The animate function will then reduce them to
    // a normal size
    //
    bar = new RGraph.SVG.Bar({
        id: 'cc',
        data: [88,45,48,23,53,12,45],
        options: {
            xaxisLabels: RGraph.SVG.DAYS_SHORT,
            marginInner: 25
        }
    //
    // The animate function now animates the properties that are
    // specified to the values that are given. There's no need
    // to call the draw function as the animate function will
    // do that for you. Only numeric properties are supported (so
    // you can't animate a color for example). As well as the
    // properties you can also specify "frames" which specifies -
    // you guessed it - the number of frames in the animation. The
    // default number is 30 (roughly half a second).
    //
    }).animate({
        marginTop: 35,
        marginBottom: 35,
        marginLeft: 35,
        marginRight: 35,
        textSize: 20
    });

    //
    // Create the Line chart that sits on top of the Bar chart. The
    // linewidth is set to zero as that will be animated too. Like
    // the Bar chart the margins are set high and will be animated
    // to their final settings. As with normal for combined Bar
    // and Line charts the axes and background grid are turned off.
    //
    line = new RGraph.SVG.Line({
        id: 'cc',
        data: [4,8,6,4,5,3,2],
        options: {
            backgroundgrid: false,
            colors: ['black'],
            linewidth: 3
        }
    //
    // The animate function for the Line chart. This animates the
    // margins, the linewidth and the inner margin.
    //
    }).animate({
        marginTop: 35,
        marginBottom: 35,
        marginLeft: 35,
        marginRight: 35,
        linewidth: 10,
        marginInner: 40
    });
</script>