A rotating background
View the bare-bones version of this demo with any interactive features or animations enabled

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 straightforward 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 labelsAboveOffset
options.
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 used as the rotating background, the responsive
function is quite large (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
, to resize and reposition
the StarBurst.
<script src="RGraph.common.core.js"></script> <script src="RGraph.common.starburst.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: 650px; height: 250px; float: left;margin-right: 25px"> <canvas id="cvs_background" width="650" height="250" style="position: absolute; top: 0; left: 0">[No canvas support]</canvas> <canvas id="cvs_foreground" width="650" height="250" style="position: absolute; top: 0; left: 0">[No canvas support]</canvas> </div>This is the code that generates the chart - it should be placed AFTER the
canvas
tag(s):