A basic example of a combined Bar/Line chart

This is an example of a Bar chart combined with a Line chart. The source code is documented to make it easier for you to copy and paste it if you wish.

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.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 ()
    {
        /**
        * The order in which you create the charts is important - the Line chart must be last. If you create the Bar object
        * second, it will be drawn "on top" of the Line.
        */
        var bar  = new RGraph.Bar({
            id: 'cvs',
            data: [143,140,141,135,136,132,129,125,126,127,127,129],
            options: {
                textAccessible: true
            }
        })

        var line = new RGraph.Line({
            id: 'cvs',
            data: [14,35,15,36,37,26,28,18,38,17,9,14],
            options: {
                backgroundGrid: false,
                noaxes: true,
                linewidth: 3,
                tickmarks: 'endcircle',
                yaxispos: 'right',
                ymax: 50,
                title: 'A combined Bar and Line chart',
                tooltips: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                tooltipsEvent: 'mousemove'
            }
        })


        /**
        * Some Bar chart configuration
        */
        bar.set({
            ymax: 250,
            gutterLeft: 50,
            gutterRight: 5,
            colors: ['yellow'],
            strokestyle: '#ddd',
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            shadow: false,
            tooltips: !RGraph.ISOLD ? ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] : null
        })




        /**
        * These gutters determine the correct placement of the Line chart
        */
        line.set({
            gutterLeft: bar.get('gutterLeft') + ((line.canvas.width - bar.get('gutterLeft') - bar.get('gutter.right')) / 24)
        });
        line.set({
            gutterRight: ((line.canvas.width - bar.get('gutterLeft') - bar.get('gutterRight')) / 24) + bar.get('gutterRight')
        });
        
        /**
        * Don't show Y labels on the Line chart
        */
        line.set({
            ylabels: false
        });
        
        /**
        * Now draw both of the charts. Bar chart first, then the Line chart is drawn on top of it
        */
        RGraph.redraw();
    };
</script>