A Line chart with multiple datasets tracing sequentially
There's three Line chart objects and each one uses the
trace() effect - however the
second is delayed by 500ms. And then the third, again using
trace() effect, is delayed by 1000ms.
Each Line object is passed all three datasets, however in each chart two of the datasets are using transparency as their color - so only one dataset can be seen. In the first Line it's the first dataset, in the second Line it's the second and in the third Line 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 tracing sequential - so each dataset starts tracing only when the previous has finished. There's a demo of this in action that you can see here: https://www.rgraph.net/demos/effects-line-tracecenter.html
That demo also uses the
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.
<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] </canvas>This is the code that generates the chart: