# A Waterfall chart with Grow effect and a combo Line/Bar on the same page

This goes in the documents header:

    <script src="RGraph.common.core.js"></script>
    <script src="RGraph.common.tooltips.js"></script>
    <script src="RGraph.common.dynamic.js"></script>
    <script src="RGraph.common.effects.js"></script>
    <script src="RGraph.bar.js"></script>
    <script src="RGraph.line.js"></script>
    <script src="RGraph.waterfall.js"></script>

Put this where you want the chart to show up:

    <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
    <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>

This is the code that generates the chart:

    <script>
        new RGraph.Waterfall({
            id: 'cvs1',
            data: [4,5,-8,-6,-5,2,3,1,-5.03],
            options: {
                labels: [
                    '','Monday', '',
                    '','Tuesday', '',
                    '','Wednesday','',
                    'Total'
                ],
                xaxispos: 'center',
                textAccessible: true
            }
        }).grow();

         // Combo - ensure the Bar chart is created first
         var bar = new RGraph.Bar({
            id: 'cvs2',
            data: [14,3,5,2,2],
            options: {
                tooltips: ['A','B','C','D','E'],
                shadowOffsetx: 3,
                shadowOffsety: 3,
                shadowBlur: 10,
                textAccessible: true
            }
        });

         var line = new RGraph.Line({
            id: 'cvs2',
            data: [4,8,6,3,5],
            options: {
                tickmarks: 'endcircle',
                linewidth: 3,
                textAccessible: true
            }
        });

         var combo = new RGraph.CombinedChart(bar, line);
         combo.draw();
    </script>