A mixed Line with spline along with a Bar chart

This is an example of a mixed Line, spline and Bar chart. It's all drawn on the same SVG tag so tooltips will work, if you need them, too. There's three chart objects - one for the red Line, one for the gray line and one for the Bar chart.

This goes in the documents header:

<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.common.line.js"></script>
<script src="RGraph.svg.common.bar.js"></script>

Put this where you want the chart to show up:

<div id="cc" style="width: 700px; height: 250px"></div>

This is the code that generates the chart:

<script>
    data = [
        1,3,2,5,4,2,3,5,6,5,
        4,6,7,5,6,8,7,5,8,6,
        8,9,6,8,7,8,9,10,11,13,
        9,11,10,13,12,11,10,11,13,11
    ];
    
    spline = [];
    
    data.forEach (function (v, k, arr)
    {
        spline[k] = v - 1;
    });

    new RGraph.SVG.Line({
        id: 'cc',
        data: data,
        options: {
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            yaxis: false,
            xaxis: false,
            xaxisLabels: ['Q1','Q2','Q3','Q4'],
            xaxisLabelsPosition: 'section',
            xaxisLabelsPositionSectionTickmarksCount: 4
        }
    }).draw();

    new RGraph.SVG.Line({
        id: 'cc',
        data: spline,
        options: {
            colors: ['rgba(0,0,0,0.25)'],
            spline: true,
            backgroundGrid: false,
            xaxis: false,
            yaxis: false,
            yaxisScale: false,
            yaxisMax: 15
        }
    }).draw();
    
    new RGraph.SVG.Bar({
        id: 'cc',
        data:[
            1,8,6,3,5,4,2,5,8,4,
            4,6,3,5,6,5,2,4,5,8,
            1,9,4,6,8,5,2,3,5,6,
            4,8,6,4,4,3,2,1,5,4,
            7,6,8,5,4,5,9,9,8,6,
            7,6,8,5,4,5,9,9,8,6,
            7,6,8,5,4,5,9,9,8,6,
            1,3,2,5,4,9,1,2,3,5
        ],
        options: {
            gutterTop: 125,
            backgroundGrid: false,
            colors: ['rgba(0,0,0,0.25)'],
            xaxis: false,
            yaxis: false,
            yaxisScale: false,
            yaxisMax: 15,
            hmargin: 1
        }
    }).draw();
</script>