HOWTO: Make a transition effect

• Introduction
• Include the libraries
• Define the JavaScript that draws the charts
• The buttons that trigger the transitions

Introduction

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

Include the libraries

This html code, which goes in the page head, simply includes the relevant RGraph libraries along with jquery.

<script src="RGraph.common.core.js" ></script>
<script src="RGraph.common.key.js" ></script>
<script src="RGraph.common.effects.js" ></script>
<script src="RGraph.bar.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

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 ()
    {
        RGraph.reset(document.getElementById("cvs"));

        // Unregister the other chart so that it doesn't keep getting redrawn
        if (typeof bar2 === 'object') RGraph.ObjectRegistry.remove(bar2);


        // Enable the correct button
        document.getElementById("butDayAndPerson").disabled = false;
        
        bar1 = new RGraph.Bar({
            id: 'cvs',
            data: [4,5,8,6,4,3,2],
            options: {
                xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
                title: 'Total sales by day',
                textSize: 14,
                marginTop: 40,
                marginInner: 15
            }
        }).reveal();
    }





    // 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;

        RGraph.reset(document.getElementById("cvs"));
        
        // De-register the other chart so that it doesn't keep getting redrawn
        if (typeof bar1 === 'object') RGraph.ObjectRegistry.remove(bar1);

        // Enable the correct button
        document.getElementById("butDayAndPerson").disabled = true;
        
        bar2 = new RGraph.Bar({
            id: 'cvs',
            data: [[2,2],[3,2],[5,3],[3,3],[3,1],[2,1],[1,1]],
            options: {
                xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
                key: ['John','Brandon'],
                title: 'Sales broken down by day and person',
                yaxisScaleMax: 10,
                textSize: 14,
                marginTop: 40
            }
        }).reveal()
    }





    function transitionTo(func)
    {
        // Disable both buttons
        document.getElementById("butDay").disabled = true;
        document.getElementById("butDayAndPerson").disabled = true;

        document.getElementById("cvs").__object__.conceal(null, func);
    }





    // 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 ()
    {
        showChart1();
    });
</script>

The buttons that trigger the transitions

These are just some regular html buttons that trigger the transition 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" style="font-size: 20pt; cursor: pointer">Show sales by day only</button>
<button onclick="transitionTo(showChart2)" disabled="disabled" id="butDayAndPerson"  style="font-size: 20pt; cursor: pointer">By day and person</button>

Notes

1. 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 that are positioned at the 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.

2. Since the ObjectRegistry was introduced (facilitating the combining of charts) objects have to be registered regardless of whether they use dynamic features or not. As a result of this, you may be experiencing objects being redrawn when you don't want them to be. To solve this you need to remove them from the ObjectRegistry. How to do this is documented here.