A Rose chart explode/implode transition effect

[No canvas support]

This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.effects.js"></script>
<script src="RGraph.rose.js"></script>
Put this where you want the chart to show up:
<canvas id="cvs" width="450" height="400">
    [No canvas support]
</canvas>
This is the code that generates the chart:
<script>
    function transition ()
    {
        var cvs = document.getElementById('cvs');

        cvs.__object__.explode(null, function ()
        {
            visible === 1 ? drawRose2() : drawRose1();
        });
    }




    // Draws the first Rose chart
    function drawRose1 ()
    {
        var cvs = document.getElementById("cvs");
        
        RGraph.reset(cvs);
        
        var rose = new RGraph.Rose({
            id: 'cvs',
            data: [4,8,6,5,3,2,9,4,2,8],
            options: {
                backgroundGrid: false,
                colorStroke: 'rgba(0,0,0,0)',
                margin: 3,
                clearto: 'white',
                axesColor: 'rgba(0,0,0,0)'
            }
        }).implode();
        
        
        // A global
        visible = 1;
    }

    // Draws the second Rose chart
    function drawRose2 ()
    {
        var cvs = document.getElementById("cvs");

        RGraph.reset(cvs);

        var rose = new RGraph.Rose({
            id: 'cvs',
            data: [1,8,8,8,4,6,3,2,5,6],
            options: {
                colorsSequential: true,
                backgroundGrid: false,
                colorsStroke: 'rgba(0,0,0,0)',
                margin: 3,
                clearto: 'white'
            }
        }).implode();
        
        // A global
        visible = 2;
    }
    drawRose1();
</script>