How to make a Contract/Expand transition effect

Share RGraph:   

Summary
A guide for making a Contract/Expand transition effect between different charts.

Warning: This effect will not work when you're using the textAccessible option - though there is a CSS effect that does something very similar .
[No canvas support]

This HOWTO document shows you how to create a transition effect between two charts using the Contract and Expand effects. The code for it is shown below.

The process is reasonably simple - each button triggers a function that Hides the current chart (whatever it may be) using the Contract effect. The Hide() function is passed a function that shows the other chart. This function is passed as a callback to the Contract effect (the function to show the new chart is run after a 250ms delay).

All the time the buttons are enabled/disabled when appropriate so that they inadvertently trigger the effects again.

1. The necessary HTML

This is the HTML required to get the canvas tag and the buttons to switch between the two charts. Both charts are drawn on the same canvas - so it is necessary to reset the canvas when showing a new chart so that old charts don't show up.

<div>
    <canvas id="cvs" width="600" height="250">[No canvas support]</canvas><br />
    <div style="text-align: center">
        <button onclick="hide(showBarChart)" disabled="disabled">Bar</button>
        <button onclick="hide(showLineChart)" disabled="disabled">Line</button>
    </div>
</div>

2. The Javascript

This is the Javascript that is used to display and switch between the two charts.



<script>
    /**
    * Disable both of the buttons
    */
    function disableButtons ()
    {
        /**
        * This disables all of the buttons
        */
        var buttons = document.getElementsByTagName('button');
        for (var i=0; i<buttons.length; ++i) {
            buttons[i].disabled = true;
        }
    }
    
    
    
    /**
    * Enable both of the buttons
    */
    function enableButtons ()
    {
        /**
        * This enables 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 Contract effect
    */
    function hide (callback)
    {
        var canvas = document.getElementById("cvs");
        var obj    = canvas.__object__;

        // Disable the buttons so they can't be pressed again
        disableButtons();

        // Hide the canvas
        obj.contract(null, function ()
        {
            // Draw the new chart (either the bar or line chart) and Expand it
            var obj = callback();
            setTimeout(function () {obj.expand({bounce: false}, enableButtons);}, 250)
        });
        
    }





    /**
    * Show the Bar charts
    */
    function showBarChart ()
    {
        var canvas = document.getElementById("cvs");
        
        // Reset the canvas
        RGraph.Reset(canvas);
        
        // Draw the Bar chart
        var bar = new RGraph.Bar({
            id: 'cvs',
            data: [84,85,86,-41,-52,-84,84],
            options: {
                xaxispos: 'center',
                labels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
                textAccessible: false
            }
        }).expand({bounce: false}, enableButtons)


        
        return bar;
    }





    /**
    * Show the line chart
    */
    function showLineChart ()
    {
        var canvas = document.getElementById("cvs");
        
        // Reset the canvas
        RGraph.reset(canvas);
        
        // Draw the line chart
        var line = new RGraph.Line({
            id: 'cvs',
            data: [4,8,6,5,3,2,1],
            options: {
                labels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
                textSize: 14,
                linewidth: 5,
                tickmarks: null,
                hmargin: 15,
                shadow: false,
                textAccessible: false
            }
        }).expand({bounce: false}, enableButtons)



        return line;
    }





    /**
    * Initially the canvas is blank 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 ()
    {
        var bar = showBarChart();
    });
</script>

Comments

Add a new comment...