A Bar chart capable of drilldown

[No canvas support]

This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.effects.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.drawing.text.js"></script>
<script src="RGraph.bar.js"></script>
Put this where you want the chart to show up:
<canvas id="cvs" width="600" height="250">
    [No canvas support]
</canvas>
This is the code that generates the chart:
<script>
    ca             = document.getElementById("cvs");
    data           = [15,14,12,18,16,13];
    data_drilldown = [];

    // The drilldown data - the order corresponds to that of the labels
    data_drilldown.push([2,3,1,2,3,1,3]);
    data_drilldown.push([2,2,2,1,2,2,3]);
    data_drilldown.push([1,1,1,2,3,2,2]);
    data_drilldown.push([3,3,3,2,3,3,1]);
    data_drilldown.push([4,3,1,1,3,2,2]);
    data_drilldown.push([3,2,2,2,3,1,0]);

    labels = ['John','Fred','Luis','Kevin','Lola','June'];
    bar    = drawMainChart();

    // Draws the main chart
    function drawMainChart ()
    {
        RGraph.reset(ca);

        var bar = new RGraph.Bar({
            id: 'cvs',
            data: data,
            options: {
                xaxisLabels: labels,
                bevelled: true,
                title: 'The whole teams statistics for sales of widgets',
                backgroundGridVlinesCount: data.length,
                colorsStroke:'rgba(0,0,0,0)',
                shadow: true
            }
        }).fadeIn();

        // When a bar is clicked show a more detailed breakdown
        bar.onclick = function (e, shape)
        {
            var obj = e.target.__object__;
            var ca  = obj.canvas;
            var idx = shape.index;



            // Slide the old bar out
            obj.fadeOut(null, function ()
            {
                RGraph.reset(ca);

                var bar = new RGraph.Bar({
                    id: 'cvs',
                    data: data_drilldown[idx],
                    options: {
                        xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
                        bevelled: true,
                        colorsStroke: 'rgba(0,0,0,0)',
                        title: 'Specific statistics for: ' + labels[idx],
                        backgroundGridVlinesCount: 7
                    }
                }).fadeIn();
            });
        }

        // The onmousemove event to change the cursor
        bar.onmousemove = function (e, shape)
        {
            return true;
        }
        
        return bar;
    }
    
    document.getElementById("butBack").onclick = function (e)
    {
        var obj = ca.__object__;

        obj.fadeOut(null,function ()
        {
            var bar = drawMainChart();
        });
    }
</script>