HOWTO: Make a transition effect

You can use the range of OfficeExcel effects to easily make an effective transition effect. This page shows you how you can do just that with the Conceal ad Reveal effects. If you need to show multiple charts this can be an effective way to switch between the two.

[No canvas support]

1. Include the libraries

This HTML code, which goes in the page <HEAD>, simply includes the relevant OfficeExcel libraries along with jQuery. 

<script src="OfficeExcel.common.core.js" ></script>
<script src="OfficeExcel.common.key.js" ></script>
<script src="OfficeExcel.common.effects.js" ></script>
<script src="OfficeExcel.bar.js" ></script>
<script src="jquery.min.js" ></script>

2. Define the Javascript that draws the charts

The charts are drawn by individual functions. This makes it easy to call those functions when needed and draw the charts. 

<script>
    /**
    * This function shows the chart that displays total sales by day.
    */
    function ShowChart1 ()
    {
        // Enable the correct button
        document.getElementById("butDayAndPerson").disabled = false;

        var bar1 = new OfficeExcel.Bar('cvs', [4,5,8,6,4,3,2]);
        bar1.Set('chart.labels', ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'])
        bar1.Set('chart.title', 'Total sales by day');
        OfficeExcel.Effects.jQuery.Reveal(bar1);
    }


    /**
    * This chart shows the total sales by day again, but this time broken down by person as well.
    */
    function ShowChart2 ()
    {
        // Enable the correct button
        document.getElementById("butDay").disabled = false;

        var bar2 = new OfficeExcel.Bar('cvs', [[2,2],[3,2],[5,3],[3,3],[3,1],[2,1],[1,1]]);
        bar2.Set('chart.title', 'Sales broken down by day and person');
        bar2.Set('chart.labels', ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']);
        bar2.Set('chart.key', ['John','Brandon']);
        bar2.Set('chart.ymax', 10);
        OfficeExcel.Effects.jQuery.Reveal(bar2);
    }


    /**
    * This function hides the canvas (whichever chart is being shown) and calls the relevant function to
    * show the desired chart. It uses the Conceal effect to hide the canvas and passes the appropriate
    * function as the "callback" which is called when the Concealeffect is done.
    * 
    * The callback then clears the canvas and draws the appropriate chart on it.
    */
    function TransitionTo(func)
    {
        // Disable both buttons
        document.getElementById("butDay").disabled = true;
        document.getElementById("butDayAndPerson").disabled = true;

        OfficeExcel.Effects.jQuery.Conceal(document.getElementById("cvs").__object__, null, func);
    }
    
    /**
    * 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 ()
    {
        ShowChart1();
    }
</script>

3. The buttons that trigger the transitions

These are just some regular HTML buttons that trigger the transitioning to a new chart. Buttons are disabled when clicked so that double clicking does not cause any ill-effects. The appropriate button is then enabled when the new chart is shown. 

<button onclick="TransitionTo(ShowChart1)" disabled="disabled" id="butDay">Show sales by day only</button>
<button onclick="TransitionTo(ShowChart2)" disabled="disabled" id="butDayAndPerson">Show sales by day and person</button>

Note

Some effects may be unusable in this type of situation because of the references that are added to the canvas. If this situation arises however it is feasible to use two separate canvas tags which are positioned at the exact same point, and use the display: CSS attribute to switch between the two. This may also be necessary if you use any interactive features such as tooltips.