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 gradients 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 in order 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.
<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: