A Line chart using the animationTraceCenter option
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.
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:
<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):
<script> // Create the first Line chart. Note the animationTraceCenter // property is set to true which changes the behaviour of the // trace() effect. The backgroundGrid and axes are enabled on this // chart (horizontal lines only). The charts are all filled and // splines. The effect used is (obviously) the trace effect and // the callback function creates the second Line chart. l1 = new RGraph.Line({ id: 'cvs', data: [8,6,3,5,12,8,5,4,6,12], options: { animationTraceCenter: true, tickmarksStyle: null, shadow: false, linewidth: 0, backgroundGridVlines: false, backgroundGridBorder: false, xaxis: false, yaxis: false, spline: true, filled: true, colors: ['#faa'], yaxisScaleMax: 35, xaxisLabels:['8am','9am','10am','11am','12pm','1pm','2pm','3pm','4pm','5pm'], responsive: [ {maxWidth:null,width: 600,height:250,options:{textSize: 14},parentCss:{'float':'right', textAlign: 'none'}}, {maxWidth:900, width: 400,height:200,options:{textSize: 10},parentCss:{'float':'none', textAlign: 'center'}} ] } }).trace(null, function () { // Create the second Line chart. Again this uses the // animationTraceCenter property that modifies the // trace() effect. It has no axes or backgroundGrid // - these are defined on the first chart. Note that // unlike the first chart this has two datasets // defined - the dataset from the first chart (which // is transparent) and this charts dataaset. new RGraph.Line({ id: 'cvs', data: [ [8,6,3,5,12,8,5,4,6,12], [4,8,6,3,5,2,4,8,5,2] ], options: { animationTraceCenter: true, tickmarksStyle: null, shadow: false, linewidth: 0, backgroundGrid: false, xaxis: false, yaxis: false, colors: ['transparent', '#ada'], spline: true, filled: true, yaxisScaleMax: 35, yaxisScale: false } }).trace(null, function () { // Again the trace() effect callback function is used // to trigger the drawing of the next Line chart. // Three datasets now - ie all three. The first two are // colored transparent so that you can't see them. Like // the second chart there's no backgroundGrid or axes and // with this being the final chart - there's no callback // function. new RGraph.Line({ id: 'cvs', data: [ [8,6,3,5,12,8,5,4,6,12], [4,8,6,3,5,2,4,8,5,2], [8,6,3,5,9,4,5,8,4,6] ], options: { animationTraceCenter: true, tickmarksStyle: null, shadow: false, linewidth: 0, backgroundGrid: false, xaxis: false, yaxis: false, colors: ['transparent', 'transparent', '#aaf'], spline: true, filled: true, yaxisScaleMax: 35, yaxisScale: false } }).trace(); }); }); </script>