A demo of a clipped Line and Bar chart

This is a demo of first drawing a spline Line chart and then using the resulting coordinates to specify a clipping area to then draw the Bar chart. The Bar charts background grid and axes are turned off so as not to appear over the Line chart. The clipping area height is slightly smaller than the coordinates (by half the linewidth) so the Bar chart does not not appear over the parts of the Line where the bars are.

[No canvas support]

This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.bar.js"></script>
<script src="RGraph.line.js"></script>
Put this where you want the chart to show up:
<canvas id="cvs" width="600" height="300">
    [No canvas support]
</canvas>
This is the code that generates the chart:
<script>
    linewidth = 5;
    linedata  = [1,5,6,8,9,8,6,4,3,1];
    bardata   = [8,7,9,10,8,7,6,5,4];

    line = new RGraph.Line({
        id: 'cvs',
        data: linedata,
        options: {
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            spline: true,
            tickmarksStyle: 'endcircle',
            linewidth: linewidth,
            shadow: false,
            textSize: 14,
            yaxisLabels: false
        }
    }).draw();
    
    ca = line.canvas;
    co = line.context;
        
    // Draw an area under the chart and clip to it
    co.beginPath();
        co.moveTo(line.marginLeft, ca.height)
        for (var i=0,len=line.coordsSpline[0].length; i<len; ++i) {
            co.lineTo(line.coordsSpline[0][i][0], line.coordsSpline[0][i][1] + (linewidth / 2) - 0.5);
        }
        co.lineTo(ca.width, ca.height)
        co.clip();
        
    // Now draw the Bar chart
    new RGraph.Bar({
        id: 'cvs',
        data: bardata,
        options: {
            xaxisLabels: ['Rob','Lucy','Lynsey','Paul','Olga','Jerry','Kev','Luis','Hoolio'],
            backgroundGrid: false,
            xaxis: false,
            yaxis: false,
            colors: ['gradient(#eef:#01B4FF)'],
            shadow: false,
            colorsStroke: 'rgba(0,0,0,0)',
            textSize: 14
        }
    }).wave();
</script>