This is an example of a mixed Line/spline and a 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, yaxisScaleMax: 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: { marginTop: 125, backgroundGrid: false, colors: ['rgba(0,0,0,0.25)'], xaxis: false, yaxis: false, yaxisScale: false, yaxisScaleMax: 15, marginInner: 1 } }).draw(); </script>