MENU
.net Powerful JavaScript charts
About
RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 16 years old) and has a wealth of features making it an ideal choice to use for showing charts on your website.

More »

 

Download
Get the latest version of RGraph (version 6.20, 1st December 2024) from the download page. You can read the changelog here. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

Download »

 

License
RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£129) commercial license available.

More »

HOWTO: Create a CSS3 switch effect

[No canvas support] [No canvas support]

Introduction

This is an example of how you can create a quick and simple switching effect between two charts (though you could add more charts if required) using css3 transitions for the animation effect.

It works by adding a css transition property to the canvas tag so that any property changes will be animated - and then, when the canvas is clicked, the properties are changed. The width and height of the front canvas are set to zero, the top and left are set to the center of the canvas so that it will shrink to the center and the opacity is set to zero so that it fades out whilst it transitions. There's also a transform property that makes the canvas tags rotate when they transition.

The opposite is applied to the rear canvas so that it comes to the front. The effect here is triggered by a click on the canvas, but could equally be triggered by a button or link.

The chart above shows the technique in action. There's also a demo page included in the download archive called bar-line-switch-effect.html which shows this technique.

The HTML that adds the script and canvas tags to the document

This is the html for the effect. All it is, is the script tags and the two canvas tags in a div tag - one behind the other.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script src="RGraph.common.core.js"></script>
<script src="RGraph.line.js"></script>
<script src="RGraph.bar.js"></script>

<div id="container">
    <canvas id="cvs1" width="600" height="250">[No canvas support]</canvas>
    <canvas id="cvs2" width="600" height="250">[No canvas support]</canvas>
</div>

The CSS to achieve the transition effect between the canvas tags

This is the css that's necessary to create the effect. Note that to achieve the animation you only have to specify the transition property - whenever properties are changed (eg width, height, opacity, transform) the browser will do the intermediate animation automatically.

<style>
    /*
    * This gets applied to the container DIV that contains the two
    * canvas tags
    */
    div#container {
        position: relative;
        width: 600px;
        height: 250px;
        float: left;
        cursor: pointer;
    }
    
    /*
    * This gets applied to both of the canvas tags. It's things
    * that are common to both of the tags
    */
    div#container canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 600px;
        height: 250px;
        background-color: white;
        transition: all 1s;
        opacity: 1;
    }
    
    /*
    * Initially the first canvas tag (the one at the "back") is hidden,
    * positioned in the center and has no width or height. This means
    * that it rotates and fades in when the charts are first clicked
    */
    div#container canvas#cvs1 {
        top: 125px;
        left: 300px;
        width: 0;
        height: 0;
        opacity: 0;
        transform: rotate(90deg);
    }
</style>

The JavaScript that creates the charts and switches them in the click event

The charts are created in the window.onload event and then a click handler for the two canvas tags is added that switches the canvas tags depending on which is visible.

<script>
    //
    // Create the Bar chart. It only gets drawn once - the canvas tags
    // are hidden/shown using CSS (which doesn't result in the canvas
    // tag getting cleared) so the chart doesn't need to be repeatedly
    // drawn.
    //
    bar = new RGraph.Bar({
        id: 'cvs1',
        data: [4,8,12],
        options: {
            colors: ['#5690C9'],
            marginInner: 25,
            colorsStroke: 'transparent',
            axesLinewidth: 15,
            textSize: 16,
            textColor: '#999',
            titleSize: 12,
            xaxis: false,
            yaxis: false,
            shadow: false,
            title: 'A Bar chart (click to switch to the Line chart)',
            backgroundGridVlines: false,
            backgroundGridBorder: false
        }

    }).draw();


    //
    // Create the Line chart. It only gets drawn once - the canvas tags
    // are hidden/shown using CSS (which doesn't result in the canvas
    // tag getting cleared) so the chart doesn't need to be repeatedly
    // drawn.
    //
    line = new RGraph.Line({
        id: 'cvs2',
        data: [
            [1,6,4],
            [5,3,8]
        ],
        options: {
            colors: ['#B71A1A','#54A4CF'],
            tickmarksStyle: function myTick (obj, data, value, index, x, y, color, prevX, prevY)
            {
                // An RGraph function
                RGraph.path(obj.context, ['b', 'a',x, y, 15, 0, 2 * Math.PI, false, 'f', color]);
                
            },
            linewidth: 10,
            shadow: false,
            xaxisLabels: ['John','Fred','Lucy'],
            title: 'A Line chart (click to switch to the Bar chart)',
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            xaxis: false,
            yaxis: false,
            marginInner: 25,
            textSize: 16,
            textColor: '#999',
            titleSize: 12,
            axesColor: '#999'
        }
    }).draw();

    //
    // The click handler is applied to both canvas tags using jQuery
    //
    $('canvas').click(function (e)
    {
        // Get the ID of whatever canvas has been clicked
        var id = e.target.id;

        //
        // If the canvas tag that has the cvs1 ID has been clicked, do this. It uses
        // jQuery to change the CSS properties of the canvas tags - namely the
        // position, dimensions, opacity and the transform. No animation
        // is stipulated here - that is handled by the CSS transition property
        //  that was defined above.
        //
        if (id === 'cvs1') {
            $('#cvs1').css({
                width: 0,
                height: 0,
                top: '125px',
                left: '300px',
                opacity: 0,
                transform: 'rotate(90deg)'
            });

            $('#cvs2').css({
                width: '600px',
                height: '250px',
                top: 0,
                left: 0,
                opacity: 1,
                transform: 'rotate(0)'
            });



        //
        // If the canvas tag that has the cvs1 ID has been clicked do this. It uses
        // jQuery to change the CSS properties of the canvas tags - namely the
        // position, dimensions, opacity and the transform. No animation
        // is stipulated here - that is handled by the CSS transition property
        // that was defined above.
        //
        } else {
            $('#cvs2').css({
                width: 0,
                height: 0,
                top: '125px',
                left: '300px',
                opacity: 0,
                transform: 'rotate(90deg)'
            });

            $('#cvs1').css({
                width: '600px',
                height: '250px',
                top: 0,
                left: 0,
                opacity: 1,
                transform: 'rotate(0)'
            });
        }
    });
</script>