A Bar chart with a rotating background

This is the single canvas version of this demo that only uses a single canvas. The background rotates and the Bar chart is drawn on top. Because of the constant updating its not conducive to interactive features - for that you'll want the two canvas version .

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.bar.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="750" height="250">[No canvas support]</canvas>

This is the code that generates the chart:

<script>
    color1    = 'white';
    color2    = 'rgba(255,0,0,0.25)';
    increment = 0.0005;
    radius    = 500; // The gradient radius

    ca    = document.getElementById('cvs'),
    co    = ca.getContext('2d'),

    cx    = ca.width / 2,
    cy    = ca.height / 2,
    angle = 0,
    
    bar = new RGraph.Bar({
        id: 'cvs',
        data: [1,5,3,2,5,6,8],
        options: {
            colors: ['Gradient(#fcc:red)'],
            labels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
            backgroundGrid: false,
            shadow: true,
            shadowOffsetx: 1,
            shadowOffsety: 1,
            shadowBlur:3
        }
    });


    function draw ()
    {
        co.clearRect(-5000,-5000,10000,10000);


        co.translate(cx,cy);
        co.rotate(increment);
        co.translate(cx * -1,cy * -1);
        
        // Keep a record of what the angle used is
        angle += increment;
        
        for (var i=0; i<6.28; i+=(6.28 / 15)) {

            var endpoint1 = RGraph.getRadiusEndPoint(cx, cy, i - 0.1, 10000 * angle * 4);
            var endpoint2 = RGraph.getRadiusEndPoint(cx, cy, i + 0.1, 10000 * angle * 4);
        
            co.beginPath();
                co.fillStyle = color2;
                co.moveTo(cx,cy);
                co.lineTo(endpoint1[0],endpoint1[1]);
                co.lineTo(endpoint2[0],endpoint2[1]);
                co.lineTo(cx,cy);
            co.fill();
        }
        
        // Draw a circular gradient from the center outwards
        var grad = co.createRadialGradient(cx, cy, 0, cx, cy, 1000);
            grad.addColorStop(0, 'rgba(255,255,255,1)');
            grad.addColorStop(0.25, 'rgba(255,255,255,0.5)');
            grad.addColorStop(0.5, 'rgba(255,255,255,0)');
        
        co.fillStyle = grad;
        RGraph.path2(
            co, 'b a % % % % % % f',
            cx, cy,
            1000,
            0,
            2 * Math.PI,
            -1
        );
        
        
        drawChart()

        setTimeout(draw, 25);













        // This function draws the chart
        function drawChart ()
        {
            // Rotate the canvas back so when drawn the chart appears straight
            co.translate(cx,cy);
            co.rotate(0-angle);
            co.translate(cx * -1,cy * -1);



            bar.draw();

            // Rotate the canvas again
            co.translate(cx,cy);
            co.rotate(angle);
            co.translate(cx * -1,cy * -1);
        }
    }
    
    draw();
</script>

« Back