An example of a filled and stacked Line chart using errorbars. The errorbars can have different min/max values, they can be colored differently, the width of the caps can be configured and the linewidth can be changed.
<script src="RGraph.svg.common.core.js"></script> <script src="RGraph.svg.line.js"></script>Put this where you want the chart to show up:
<div style="padding: 15px"> <div style="width: 750px; height: 300px" id="chart-container"></div> </div>This is the code that generates the chart:
<script> line = new RGraph.SVG.Line({ id: 'cc', data: [ [1,5,1,2,1,2,1], [5,5,5,3,4,6,8] ], options: { linewidth:3, filled: true, filledAccumulative: true, errorbars: [ {min: 1, max: 1, color: 'red', linewidth: 3,capwidth: 25}, 1, {min: null, max: 1}, {min: 1, max: 1}, {min: 1, max: 1}, {min: 1, max: 1}, {min: 1, max: 1}, {min: 1, max: 1}, {min: 1, max: 1}, {min: 1, max: 1}, {min: 1, max: 1}, {min: 1, max: 1}, {min: 1, max: 1}, {min: 1, max: 1} ], errorbarsColor: 'black', errorbarsLinewidth: 1, errorbarsCapwidth: 10, colors: ['rgba(255,0,0,0.25)','rgba(0,0,255,0.25)'], hmargin: 20, xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'], //xaxis: false, yaxis: false, backgroundGridVlines: false, backgroundGridBorder: false } }).draw(); </script>