A basic example of a combined Bar and Line chart

[No canvas support]

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>
    /**
    * The order in which you create the charts is important - the Line chart must be last. If you create the Bar chart 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: {
        }
    });

    var line = new RGraph.Line({
        id: 'cvs',
        data: [14,35,15,36,37,26,28,18,38,17,9,14],
        options: {
            backgroundGrid: false,
            axes: false,
            linewidth: 3,
            tickmarksStyle: 'endcircle',
            yaxisPosition: 'right',
            yaxisScaleMax: 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({
        yaxisScaleMax: 250,
        marginLeft: 50,
        marginRight: 5,
        colors: ['yellow'],
        colorsStroke: '#ddd',
        xaxisLabels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        shadow: false,
        tooltips: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    });




    /**
    * These margins determine the correct placement of the Line chart
    */
    line.set('marginLeft', bar.get('marginLeft') + ((line.canvas.width - bar.get('marginLeft') - bar.get('marginRight')) / 24))
    line.set('marginRight', ((line.canvas.width - bar.get('marginLeft') - bar.get('marginRight')) / 24) + bar.get('marginRight'));
    
    /**
    * Don't show Y labels on the Line chart
    */
    line.set('yaxisLabels', false);
    
    /**
    * Now draw both of the charts. Bar chart first, then the Line chart is drawn on top of it
    */
    RGraph.redraw();
</script>