A Line chart with multiple datasets tracing sequentially

Summary: A Line chart with multiple datasets which are tracing sequentially from the left-hand-side.

[No canvas support]

This demo shows you how you can create new effects with a little customisation and a smattering of standard JavaScript.

There's three Line chart objects and each one uses the trace() effect - however the second is delayed until the first is finished. And then the third, again using the trace() effect, is delayed until the second is finished.

Each Line object is passed all three datasets, however in each chart two of the datasets are set to use transparent as their color - so only one dataset can be seen. In the first Line chart it's the first dataset, in the second Line chart it's the second and in the third Line chart it's the third dataset.

The visible colors are gradients, as you can see. If it runs a little too slow for you on your device (on less powerful devices it can slow down a little) you can make the gradients solid colors and you can also make the sequential tracing a little delayed - so each dataset starts tracing only when the previous has finished and then a little delay too. There's a demo of the datasets tracing from the center outwards that you can see here: https://www.rgraph.net/demos/effects-line-tracecenter.html

That demo also uses the animationTraceCenter option - and this changes the trace() effect from tracing from the left hand side to tracing from the center of the chart outwards in both directions.

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:
<canvas id="cvs" width="700" height="300">
    [No canvas support]
This is the code that generates the chart: