# A Rose chart explode/implode transition effect

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,
                    strokestyle: 'rgba(0,0,0,0)',
                    margin: 3,
                    clearto: 'white',
                    textAccessible: true
                }
            }).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,
                    strokestyle: 'rgba(0,0,0,0)',
                    margin: 3,
                    clearto: 'white',
                    textAccessible: true
                }
            }).implode();

            // A global
            visible = 2;
        }

        window.onload = function ()
        {
            drawRose1();
        };
    </script>

« Back