A CSS expand effect

[No canvas support] [No canvas support] [No canvas support] [No canvas support] [No canvas support] [No canvas support] [No canvas support] [No canvas support] [No canvas support]
Put this in the documents header:
<script src="RGraph.common.core.js" ></script>
<script src="RGraph.bar.js" ></script>
<script src="RGraph.line.js" ></script>
<script src="RGraph.waterfall.js" ></script>
<script src="RGraph.hbar.js" ></script>
Put this where you want the chart to show up:
<style>
    #container {
        position: relative;
        width: 900px;
        height: 375px;
        opacity: 0;
        transition: opacity 1s;
    }

    #container canvas {
        outline: none;
        position: absolute;
        transition-delay: .25s;
        z-index: 0;
        width: 300px;
        background-color: #fff;
    }

    #container canvas#cvs1 {top: 0;left: 0;}
    #container canvas#cvs2 {top: 0;left: 300px;}
    #container canvas#cvs3 {top: 0;left: 600px;}
    #container canvas#cvs4 {top: 125px;left: 0;}
    #container canvas#cvs5 {top: 125px;left: 300px;}
    #container canvas#cvs6 {top: 125px;left: 600px;}
    #container canvas#cvs7 {top: 250px;left: 0;}
    #container canvas#cvs8 {top: 250px;left: 300px;}
    #container canvas#cvs9 {top: 250px;left: 600px;}

    #container canvas#cvs1:focus,
    #container canvas#cvs2:focus,
    #container canvas#cvs3:focus,
    #container canvas#cvs4:focus,
    #container canvas#cvs5:focus,
    #container canvas#cvs6:focus,
    #container canvas#cvs7:focus,
    #container canvas#cvs8:focus,
    #container canvas#cvs9:focus {
        top: 5%;
        left: 5%;
        width: 90% !important;
        height: 90% !important;
        z-index: 999;
        box-shadow: 0 0 25px #ccc;
    }
</style>

<div id="container">
    <canvas id="cvs1" width="900" height="375" tabindex="1">[No canvas support]</canvas>
    <canvas id="cvs2" width="900" height="375" tabindex="1">[No canvas support]</canvas>
    <canvas id="cvs3" width="900" height="375" tabindex="1">[No canvas support]</canvas>
    <canvas id="cvs4" width="900" height="375" tabindex="1">[No canvas support]</canvas>
    <canvas id="cvs5" width="900" height="375" tabindex="1">[No canvas support]</canvas>
    <canvas id="cvs6" width="900" height="375" tabindex="1">[No canvas support]</canvas>
    <canvas id="cvs7" width="900" height="375" tabindex="1">[No canvas support]</canvas>
    <canvas id="cvs8" width="900" height="375" tabindex="1">[No canvas support]</canvas>
    <canvas id="cvs9" width="900" height="375" tabindex="1">[No canvas support]</canvas>
</div>
This is the code that generates the chart - it should be placed after the canvas / div (when using svg charts) tags:
<script id="rgraph-demo-source-code">
    bar1 = new RGraph.Bar({
        id: 'cvs1',
        data: [4,5,3,1,2,6,5,4,8],
        options: {
            xaxisLabels: ['Dave','Loui','Luis','Pete','Olga','Steve','Kevin','John','Cuthbert'],
            textSize: 14
        }
    }).draw();




    line1 = new RGraph.Line({
        id: 'cvs2',
        data: [1,3,5,2,6,4,7,8,9],
        options: {
            xaxisLabels: ['Dave','Loui','Luis','Pete','Olga','Steve','Kevin','John','Cuthbert'],
            textSize: 14,
            spline: true
        }
    }).draw();




    waterfall1 = new RGraph.Waterfall({
        id: 'cvs3',
        data: [45,-2,-9,4,6,3,-23,2,4],
        options: {
            xaxisLabels: ['Dave','Loui','Luis','Pete','Olga','Steve','Kevin','John','Total'],
            textSize: 14
        }
    }).draw();




    waterfall2 = new RGraph.Waterfall({
        id: 'cvs4',
        data: [4,5,3,1,2,6,5,4,-8],
        options: {
            xaxisLabels: ['Dave','Loui','Luis','Pete','Olga','Steve','Kevin','John','Total'],
            textSize: 14
        }
    }).draw();



    bar2 = new RGraph.Bar({
        id: 'cvs5',
        data: [4,7,9,5,3,7,6],
        options: {
            xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
            marginInner: 20
        }
    }).draw();

    line2 = new RGraph.Line({
        id: 'cvs6',
        data: [3,7,8,4,4,2,7],
        options: {
            xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
            textSize: 14,
            marginInner: 25,
            spline: true
        }
    }).draw();



    hbar1 = new RGraph.HBar({
        id: 'cvs7',
        data: [8,3,7,4,6,9,8],
        options: {
            yaxisLabels: ['Jolly','Wolly','Lolly','Colly','Dolly','Molly','Polly'],
            textSize: 14,
            marginLeft: 75,
            marginLeftAuto: false,
            marginInner: 10
        }
    }).draw();

    line3 = new RGraph.Line({
        id: 'cvs8',
        data: [8,3,7,4,6,9,8],
        options: {
            xaxisLabels: ['Jolly','Wolly','Lolly','Colly','Dolly','Molly','Polly'],
            textSize: 14,
            marginInner: 25,
            spline: true,
            linewidth: 20,
            shadow: true,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            xaxis: false,
            yaxis: false,
            textSize: 20
        }
    }).draw();

    bar3 = new RGraph.Bar({
        id: 'cvs9',
        data: [7,3,9,7,4,8,3],
        options: {  
            xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
            marginInner: 25
        }
    }).draw();


    for (i of ['bar1','bar2','bar3','line1','line2','line3','waterfall1','waterfall2','hbar1']) {
        (function (i)
        {
            window[i].canvas.style.width  = '300px';
            window[i].canvas.style.height = '125px';
            
            setTimeout(function ()
            {
                window[i].canvas.style.transition = 'top .5s, left .5s, width .5s, height .5s, z-index .5s, transform .25s, box-shadow .5s';
            }, 250);
        })(i);
    }
    
    document.getElementById('container').style.opacity = 1;
</script>