# A combined Bar and Spline chart

Here the two charts are animated using the RGraph effects library. The Line chart uses the Trace effect and the Bar chart uses the Grow effect.

This goes in the documents header:

    <script src="RGraph.common.core.js"></script>
    <script src="RGraph.common.dynamic.js"></script>
    <script src="RGraph.common.tooltips.js"></script>
    <script src="RGraph.common.effects.js"></script>
    <script src="RGraph.line.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>
        window.onload = function ()
        {
            var bar = new RGraph.Bar({
                id: 'cvs',
                data: [4,5,3,8,4,9,6,5,3,7],
                options: {
                    labels: ['Mal', 'Barry', 'Gary', 'Neil', 'Kim', 'Pete', 'Lou', 'Fred', 'Jobe', 'Larry'],
                    colors: ['#ddf'],
                    ylabels: false,
                    backgroundGridVlines: false,
                    backgroundGridBorder: false,
                    textSize: 14,
                    strokestyle: 'rgba(0,0,0,0)'
                }
            }).grow()

            line = new RGraph.Line({
                id: 'cvs',
                data: [41,43,45,54,42,41,21,18,12,11],
                options: {
                    spline: true,
                    shadow: true,
                    tickmarks: 'endsquare',
                    backgroundGridVlines: false,
                    backgroundGridBorder: false,
                    textSize: 14,
                    tooltips: ['Mal', 'Barry', 'Gary', 'Neil', 'Kim', 'Pete', 'Lou', 'Fred', 'Jobe', 'Larry']
                }
            })

            line.set('hmargin', (line.canvas.width - line.get('gutterLeft') - line.get('gutterRight')) / (bar.data.length * 2))
                .trace2({frames: 30});
        };
    </script>