A sequential trace effect
View the bare-bones version of this demo with any interactive features or animations enabled
This demo shows you how you can create new effects with a little customisation
and a smattering of standard
There are 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
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 the 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
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.
When the screen size is smaller the chart shrinks and the
is removed. Because gradients are used as the fill colors these too are reset.
This is done by having each object clone its original colors so that the gradients are recreated and then redrawing the charts.
It should also be noted that the
responsive functionality isn't added until all of the animation effects
have completed. This is done by simply using the standard
<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="600" height="250" style="background-color: black; float: right">[No canvas support]</canvas>This is the code that generates the chart - it should be placed AFTER the