An SVG Line and Bar chart

This is an example of a mixed Line/spline and also a Bar chart. It's all drawn on the same svg tag so tooltips will work if you need them as well.

There are three chart objects - one for the red Line chart, one for the gray Line chart and one for the Bar chart.

The data for one of the Lines - the spline chart - is created dynamically and is two units lower than the angular Line. This is what the forEach loop does in the code below.

The second Line chart along with the Bar chart have their axes and y-axis labels turned off as these are drawn by the first Line chart. Similarly, the x-axis labels are also drawn by the first Line chart.

There's a responsive configuration that simply reduces the size of the chart and removes the css float that is applied to the canvas tag.

This goes in the documents header:

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

Put this where you want the chart to show up:

<div style="float: right">
    <div id="cc" style="width: 600px; height: 250px"></div>
</div>

This is the code that generates the chart - it should be placed AFTER the div tag:

<script>
    // This is the data for the red angled Line. A single array
    // of lots of datapoints.
    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
    ];
    
    // Now create the spline array - which is done by looping through
    // the data array and setting the value to 1 less.
    spline = [];
    
    data.forEach (function (v, k, arr)
    {
        spline[k] = v - 1;
    });

    // Create the red angled Line using the original data array.
    // No axes are specified and the labels are set to use the
    // same spacing and positioning as the Scatter chart. The
    // labels are slightly smaller than the default.
    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,
            textSize: 10,
            yaxisScaleMax: 15
        }
    }).draw();

    // This is the spline chart which shows the data that's generated
    // above. It doesn't have the backgroundGrid, the axes or the
    // yaxisScale enabled.
    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,
            yaxisScaleMax: 15
        }
    }).draw();
    
    // The Bar chart. The backgroundGrid, the axes and the Y-axis
    // scale are disabled. The maximum value, like the Line charts
    // above, is set to 15.
    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: {
            marginTop: 125,
            backgroundGrid: false,
            colors: ['rgba(0,0,0,0.25)'],
            xaxis: false,
            yaxis: false,
            yaxisScale: false,
            yaxisScaleMax: 15,
            marginInner: 1,
            
            // Add some responsive capability
            responsive: [
                {maxWidth:null,width:600,height:250,parentCss:{'float':'right',textAlign:'none'}},
                {maxWidth:900,width:400,height:200,parentCss:{'float':'none',textAlign:'center'}}
            ]
        }
    
    // Draw the chart
    }).draw();
</script>