A Bar chart with a rotating background on dual canvas tags
Summary: A bar chart using two canvas tags and on the rear there's a rotating starburst effect. Because it's on a different canvas the bar chart doesn't need to be redrawn.
This is the dual canvas version of this demo that uses two canvas
tags. It has also now been changed to use the
RGraph.common.starburst.js code which
makes adding a starburst effect at the back of your canvas easier.
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 - though the labels at the top of each bar are done by using the
labelsAbove and the
It also uses the
wave() animation effect.
What happens with the other canvas is quite interesting though - It uses the StarBurst code (which is bundled as part of RGraph) to create the rotating StarBurst effect that you can see. Because this is drawn on a separate canvas tag there are no issues generated for tooltips (if the StarBurst was drawn on the same canvas as the chart the constant redrawing would cause issues).
Because the StarBurst code is in use as the rotating background, the
function is quite large (in order to correctly change the StarBurst so that it looks correct).
This is why the code is expanded and not all on one line like in the other examples. Most of the
action in the responsive configuration is in the
callback in order to resize and reposition
<script src="RGraph.common.core.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: