HOWTO: Make a contract/expand effect

• The necessary HTML
• The JavaScript code

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).

Throughout this, the buttons are enabled/disabled when appropriate so that they don't inadvertently trigger the effects again.

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's necessary to reset the canvas when showing a new chart so that old charts don't show up.

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

The JavaScript code

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

<script>
    // Disable both of the buttons
    function disableButtons ()
    {
        var buttons = document.getElementsByTagName('button');
        for (var i=0; i<buttons.length; ++i) {
            buttons[i].disabled = true;
        }
    }
    
    
    // Enable both of the buttons
    function enableButtons ()
    {
        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: Draw the new chart (either the bar or line chart) and expand it
        obj.contract(null, function ()
        {
            
            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: {
                xaxisPosition: 'center',
                xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']
            }
        }).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: {
                xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
                textSize: 14,
                linewidth: 5,
                tickmarksStyle: null,
                marginInner: 15,
                shadow: 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>