How to make a scissors transition effect

Share RGraph:   

Summary
A guide for making a scissors transition effect between different charts.


[No canvas support]

This HOWTO document shows you how to create a transition effect between three charts using the vertical scissors open and close effects. The code for it is shown below.


<script>
    function disableButtons ()
    {
        /**
        * This disable all of the buttons
        */
        var buttons = document.getElementsByTagName('button');
        for (var i=0; i<buttons.length; ++i) {
            buttons[i].disabled = true;
        }
    }




    function enableButtons ()
    {
        /**
        * This disable all of the buttons
        */
        var buttons = document.getElementsByTagName('button');
        for (var i=0; i<buttons.length; ++i) {
            buttons[i].disabled = false;
        }
    }




    /**
    * Hides the canvas using the VScissors effect
    */
    function hide (callback)
    {
        var canvas = document.getElementById("cvs");

        // Close the "scissors"
        vScissorsClose(null, function () {RGraph.Clear(canvas);RGraph.ObjectRegistry.Clear();callback();});
        
        DisableButtons();
    }




    function showBarChart ()
    {
        var canvas = document.getElementById("cvs");
        
        // Now draw the bar chart
        var bar = new RGraph.Bar({
            id: 'cvs',
            data: [4,6,3,5,2,4,6,8,9,5,4,1],
            options: {
                labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
                textAccessible: true,
                textSize: 14
            }
        }).vScissorsOpen(null, EnableButtons);
    }




    /**
    * Show the line chart
    */
    function showLineChart ()
    {
        var canvas = document.getElementById("cvs");

        // Now draw the bar chart
        var line = new RGraph.Line({
            id: 'cvs',
            data: [4,6,3,5,2,4,6,8,9,5,4,1],
            options: {
                labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
                textAccessible: true,
                textSize: 14
            }
        }).vScissorsOpen(null, EnableButtons)
    }




    /**
    * Shows the Pie chart
    */
    function showPieChart ()
    {
        var canvas = document.getElementById("cvs");
        
        // Now draw the Pie chart
        var pie = new RGraph.Pie({
            id: 'cvs',
            data: [4,5,1,2,3],
            options: {
                labels: ['Joe','Pete','Luis','Kevin','John'],
                textAccessible: true,
                textSize: 14
            }
        }).vScissorsOpen(null, EnableButtons)
    }




    /**
    * Initially the canvas is blabk so there is no need to clear anything. So it is sufficient to
    * just call the relevant function to show the first chart.
    */
    window.onload = (function ()
    {
        disableButtons();
        showBarChart();
    })
</script>

<div style="float: right; text-align: center">
    <button onclick="Hide(ShowBarChart)">Bar</button>
    <button onclick="Hide(ShowLineChart)">Line</button>
    <button onclick="Hide(ShowPieChart)">Pie</button><br />
    <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
</div>

Comments

Add a new comment...