A Bar chart with a rotating background on dual canvas tags
This is the dual canvas version of this demo that uses two canvas tags. The background rotates on the rear canvas and the Bar chart is drawn on the foreground canvas. The single canvas version can be found in the demos that come with the download archive .
The Bar chart is straight-forward enough - it has a high
marginInner setting, no
labels and no tickmarks. It uses the
wave() function and instead of using the
draw event to add the custom text (the labels) the animation callback function
is used to add the
draw function and then this function is called (pseudo) manually.
This way any future draws will keep drawing the labels.
What happens with the other canvas is quite interesting though -
Here the background arcs are drawn - using a gradient - and emanate from the center of the canvas outwards. The arcs are drawn all around the center of the chart and after a short delay the angle that they begin at is incremented and then drawing is repeated. This repetition is what gives the appearance of the background being animated.This goes in the documents header:
<script src="RGraph.common.core.js"></script> <script src="RGraph.common.dynamic.js"></script> <script src="RGraph.common.tooltips.js"></script> <script src="RGraph.bar.js"></script>Put this where you want the chart to show up:
<div style="position: relative; display: inline-block; width: 750px; height: 250px"> <canvas id="cvs_background" width="750" height="250" style="position: absolute; top: 0; left: 0">[No canvas support]</canvas> <canvas id="cvs_foreground" width="750" height="250" style="position: absolute; top: 0; left: 0">[No canvas support]</canvas> </div>This is the code that generates the chart: