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 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:
<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):