# A grouped Bar chart with a wave effect

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