A 3D Bar chart with multiple rows

This style of 3D chart is not supported natively but is pretty easy to achieve - especially as all the source code is below and you can just copy it!

[No canvas support]

This goes in the documents header:

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

Put this where you want the chart to show up:

<canvas id="cvs" width="650" height="300">
    [No canvas support]
</canvas>

This is the code that generates the chart:

<script>
    var gutterLeft   = 60,
        gutterRight  = 25,
        gutterTop    = 45,
        gutterBottom = 65,
        hmargin      = 15,
        ymax         = 35,
        data = [

            // If you don't need a third dataset take out this FIRST
            // dataset and replace it with the word: null

            // null, // [12,16,10,12,13,15,16]
            [5,16,10,12,13,15,16],

            [20,21,24,23,18,19,20],
            [35,34,32,28,26,35,34]
        ],
        colors = [
            'Gradient(#696:#0f0:#0f0)',
            'Gradient(#966:#f00:#f00)',
            'Gradient(#669:blue:blue)'
        ],
        labels = ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'];




    var bar = new RGraph.Bar({
        id: 'cvs',
        data: data[2],
        options: {
            textAccessible: true,
            variant: '3d',
            variantThreedYaxis: false,
            variantThreedXaxis: false,
            strokestyle: 'rgba(0,0,0,0)',
            colors: [colors[2]],
            shadow: true,
            shadowOffsetx: 10,
            backgroundGridColor: '#ccc',
            backgroundGridAutofitNumhlines: 5,
            backgroundGridAutofitNumvlines: 14,
            scaleZerostart: true,
            axisColor: '#ddd',
            gutterBottom: gutterBottom,
            gutterTop: gutterTop,
            gutterLeft: gutterLeft,
            gutterRight: gutterRight,
            hmargin: hmargin,
            ymax: ymax,
            noaxes: true,
            ylabels: false
        }
    }).grow();

    var bar2 = new RGraph.Bar({
        id: 'cvs',
        data: data[1],
        options: {
            textAccessible: true,
            variant: '3d',
            variantThreedYaxis: false,
            variantThreedXaxis: false,
            strokestyle: 'rgba(0,0,0,0)',
            colors: [colors[1]],                
            shadow: true,
            shadowOffsetx: 10,
            shadowColor: 'rgba(0,0,0,0.5)',
            backgroundGrid: false,
            axisColor: '#ddd',
            ylabels: false,
            labels: [],
            gutterBottom: gutterBottom - 10,
            gutterTop: gutterTop + 10,
            gutterLeft: gutterLeft - 25,
            gutterRight: gutterRight + 25,
            hmargin: hmargin,
            ymax: ymax,
            noaxes: true
        }
    }).grow();


    if (data[0]) {
        var bar3 = new RGraph.Bar({
            id: 'cvs',
            data: data[0],
            options: {
                textAccessible: true,
                variant: '3d',
                variantThreedYaxis: false,
                variantThreedXaxis: false,
                strokestyle: 'rgba(0,0,0,0)',
                colors: [colors[0]],
                labels: labels,
                shadow: true,
                shadowOffsetx: 10,
                shadowColor: 'rgba(0,0,0,0.5)',
                backgroundGrid: false,
                axisColor: '#ddd',
                unitsPost: 'km',
                gutterTop: gutterTop + 20,
                gutterBottom: gutterBottom - 20,
                gutterLeft: gutterLeft - 40,
                gutterRight: gutterRight + 40,
                hmargin: hmargin,
                ymax: ymax,
                noaxes: true,
                scaleZerostart: true,
                ylabels: false
            }
        }).grow();
    }
    
    var yaxis = new RGraph.Drawing.YAxis({
        id: 'cvs',
        x: 640,
        options: {
            max:          bar.scale2.max,
            colors:       ['rgba(0,0,0,0)'],
            textColor:    'black',
            gutterTop:    gutterTop,
            gutterBottom: gutterBottom + 35,
            align: 'right'
        }
    }).draw();
</script>