A rotating background

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.

This goes in the documents header:

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

<script>
    // This function is called when a tooltip is about to be shown
    // and removes linebreaks from the text
    function removeLinebreak (str)
    {
        return str.replace(/\r?\n/g, ': ');
    }

    // This adds the StarBurst effect to the background canvas. It uses either the
    // requestAnimationFrame() function or the setTimeout() function to animate itself.
    // You can of course turn the animation off if you choose.
    sb = new RGraph.StarBurst({
        id: 'cvs_background',
        options: {
        }
    }).draw();

    // Define the data and the labels
    data        = [4,8,6,5,3,7,8];
    labelsAbove = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
    
    // Create the labels that go at the top of each bar
    labelsAbove.forEach(function (v, k, arr)
    {
        arr[k] = v + '\r\n%1k'.format(data[k]);
    });

    // Create a Bar chart and add it to the foreground canvas tag. There are no
    // xaxisLabels defined, though the labelsAbove labels from above are present
    // and configured to appear at the top of each bar.
    bar = new RGraph.Bar({
        id: 'cvs_foreground',
        data: data,
        options: {
            marginTop: 15,
            marginLeft: 15,
            marginRRight: 15,
            marginBottom: 15,
            xaxisLinewidth: 3,
            xaxisTickmarksCount: 0,
            yaxis: false,
            yaxisScale: false,
            colors: ['black'],
            backgroundGrid: false,
            shadow: false,
            tooltipsCss: {
                fontSize: '20pt',
                fontWeight: 'bold'
            },
            labelsAbove: true,
            tooltips: "<center>%{function:removeLinebreak('%{property:labelsAboveSpecific[%{dataset}]}')}</center>",
            labelsAboveSpecific: labelsAbove,
            labelsAboveColor: 'white',
            labelsAboveBold: true,
            labelsAboveItalic: true,
            labelsAboveOffsetx: -2,
                
            // The responsive configuration for this chart, because it
            // has the StarBurst behind it, is quite large
            responsive: [
                {maxWidth: null,width: 650,height: 250,options: {marginInner:25,labelsAboveSize: 10,labelsAboveOffsety: -35},callback: function (){sb.canvas.width = 650,sb.canvas.height = 250;sb.set('centerx', 200);sb.set('centery', 50);document.getElementById('cvs_foreground').parentNode.style.width = '650px';document.getElementById('cvs_foreground').parentNode.style.height = '250px';RGraph.redraw();}},
                {maxWidth: 900,width: 400,height: 150,options: {marginInner:10, labelsAboveSize:7, labelsAboveOffsety:-25},callback: function (){sb.canvas.width = 400,sb.canvas.height = 150;sb.set('centerx', 150);sb.set('centery', 30);document.getElementById('cvs_foreground').parentNode.style.width = '400px';document.getElementById('cvs_foreground').parentNode.style.height = '150px';document.getElementById('cvs_foreground').__object__.draw();}}
            ]
        }
    // The responsive function for this chart, because it has the StarBurst behind it,
    // is quite large
    }).wave();
</script>