A grouped Bar chart with a wave effect

[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: 
<div style="padding: 15px">
    <canvas id="cvs" width="750" height="250">[No canvas support]</canvas>
</div>
This is the code that generates the chart: 
<script>

    data       = [4,8,6,3,5,8,4];
    data_chart = []
    
    data.forEach(function (v, k, arr)
    {
        data_chart.push(0);

        for (var i=0; i<5; ++i) {
            data_chart.push(v);
        }
        
        data_chart.push(0);
    });


    new RGraph.Bar({
        id: 'cvs',
        data: data_chart,
        options: {
            labels: [
                '','','Monday','','',
                '','','Tuesday','','',
                '','','Wednesday','','',
                '','','Thursday','','',
                '','','Friday','','',
                '','','Saturday','','',
                '','','Sunday','',''
            ],
            unitsPost: 'k',
            colors: ['Gradient(#fff:red)'],
            strokestyle: 'rgba(0,0,0,0)',
            textSize: 14,
            title: 'A grouped Bar chart using the Wave effect',
            numyticks: 5,
            noaxes: true,
            gutterLeft: 50,
            hmargin: -1,
            shadow: 0,
            backgroundGridVlines: false,
            backgroundGridBorder: false
        }
    }).wave({frames: 60});
</script>

« Back