# A Bar chart combined with a Line chart

This goes in the documents header:

    <script src="RGraph.common.core.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: [-2.25,-1.8,0.1,1.95,2.2,2.8,4.3,5.7,6,4.3,5.5,6.5,6.45,5.5,5.4],
                options: {
                    gutterBottom: 40,
                    xaxispos: 'center',
                    backgroundGridAutofitNumvlines: 0,
                    backgroundGridAutofitNumHlines: 8,
                    ylabelsCount: 8,
                    numyticks: 8,
                    strokestyle: 'rgba(0,0,0,0)',
                    labels: [
                        'Q1\r\n2009','Q2\r\n2009','Q3\r\n2009','Q4\r\n2009',
                        'Q1\r\n2010','Q2\r\n2010','Q3\r\n2010','Q4\r\n2010',
                        'Q1\r\n2011','Q2\r\n2011','Q3\r\n2011','Q4\r\n2011',
                        'Q1\r\n2012','Q2\r\n2012','Q3\r\n2012','Q4\r\n2012'
                    ],
                    ymax: 8,
                    textAccessible: true
                }
            })

            //var line = new RGraph.Line({
            //    id: 'cvs',
            //    data: [-2,-1,0.5,2.2,2.8,3.2,4.7,5.7,5.9,4.5,6.5,7.5,6.8,5.8,5.8],
            //    colors: ['#000'],
            //    xaxispos: 'center',
            //    ymax: 8,
            //    linewidth: 4,
            //    tickmarks: null
            //})

            var line = new RGraph.Line({
                id: 'cvs',
                data: [-2,-1,0.5,2.2,2.8,3.2,4.7,5.7,5.9,4.5,6.5,7.5,6.8,5.8,5.8],
                options: {
                    colors: ['#000'],
                    xaxispos: 'center',
                    ymax: 8,
                    linewidth: 4,
                    tickmarks: null,
                    textAccessible: true
                }
            })

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

« Back