A Line chart using the animationTraceCenter option

This is a canvas based demonstration of the Line chart animationTraceCenter option which is used when utilising the trace effect.

In addition to this trace effect, there are three datasets shown - and each one is its own chart object. The second and third charts start animating when the previous chart has finished.

ie When the first Line chart finishes its trace effect the callback triggers the second chart to start animating and then when it also finishes animating the third Line chart is animated.

The overall effect is as you see here - each dataset animating sequentially. This is better than delayed effects (so the second Line chart starts tracing whilst the first is still animating and similarly for the third dataset) because the browser isn't animating two charts at once - thus reducing the amount of work that it has to do.

In terms of other configuration, the linewidth option is set to zero, the backgroundGrid and the axes options are set to false (on two of the chart objects), the colors are set to solid colors and the y-axis scale maximum is set to 35. The labels are added to the first chart that's drawn

When the screen shrinks the chart is made to be smaller to accommodate the smaller screen and the text size is reduced. The css float setting of the canvas tag is removed so that it isn't aligned to the right-hand-side.

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.line.js"></script>

Put this where you want the chart to show up:

<div style="float: right">
    <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
</div>

This is the code that generates the chart - it should be placed AFTER the canvas tag(s):

<script>
    // Create the first Line chart. Note the animationTraceCenter
    // property is set to true which changes the behaviour of the
    // trace() effect. The backgroundGrid and axes are enabled on this
    // chart (horizontal lines only). The charts are all filled and
    // splines. The effect used is (obviously) the trace effect and
    // the callback function creates the second Line chart.
    l1 = new RGraph.Line({
        id: 'cvs',
        data: [8,6,3,5,12,8,5,4,6,12],
        options: {
            animationTraceCenter: true,
            linewidth: 0,
            spline: true,
            filled: true,
            colors: ['#faa'],
            yaxisScaleMax: 35,
            xaxisLabels:['8am','9am','10am','11am','12pm','1pm','2pm','3pm','4pm','5pm'],
            responsive: [
                {maxWidth:null,width: 600,height:250,options:{textSize: 14},parentCss:{'float':'right', textAlign: 'none'}},
                {maxWidth:900, width: 400,height:200,options:{textSize: 10},parentCss:{'float':'none', textAlign: 'center'}}
            ]
        }
    }).trace({frames: 30}, function ()
    {
        // Create the second Line chart. Again this uses the
        // animationTraceCenter property that modifies the
        // trace() effect. It has no axes or backgroundGrid
        // - these are defined on the first chart. Note that
        // unlike the first chart this has two datasets
        // defined - the dataset from the first chart (which
        // is transparent) and this charts dataaset.
        new RGraph.Line({
            id: 'cvs',
            data: [
                [8,6,3,5,12,8,5,4,6,12],
                [4,8,6,3,5,2,4,8,5,2]
            ],
            options: {
                animationTraceCenter: true,
                linewidth: 0,
                backgroundGrid: false,
                colors: ['transparent', '#ada'],
                spline: true,
                filled: true,
                yaxisScaleMax: 35,
                yaxisScale: false
            }
        }).trace({frames: 30}, function ()
        {
            // Again the trace() effect callback function is used
            // to trigger the drawing of the next Line chart.
            // Three datasets now - ie all three. The first two are
            // colored transparent so that you can't see them. Like
            // the second chart there's no backgroundGrid or axes and
            // with this being the final chart - there's no callback
            // function.
            new RGraph.Line({
                id: 'cvs',
                data: [
                    [8,6,3,5,12,8,5,4,6,12],
                    [4,8,6,3,5,2,4,8,5,2],
                    [8,6,3,5,9,4,5,8,4,6]
                ],
                options: {
                    animationTraceCenter: true,
                    linewidth: 0,
                    backgroundGrid: false,
                    colors: ['transparent', 'transparent', '#aaf'],
                    spline: true,
                    filled: true,
                    yaxisScaleMax: 35,
                    yaxisScale: false
                }
            }).trace({frames: 30});
        });
    });
</script>