An example of a Scatter chart that uses errorbars. The errorbars can be both upper and lower values. Errorbars can be used to show a range of possible values or standard-deviation etc. They can also be coloured indiviually if so desired.
This goes in the documents header:<script src="RGraph.svg.common.core.js"></script> <script src="RGraph.svg.scatter.js"></script>Put this where you want the chart to show up:
<div style="width: 650px; height: 350px; border: 1px solid #ddd" id="chart-container"></div>This is the code that generates the chart:
<script> var data1 = [ {x:1, y:7, errorbar: 3, color: 'red'}, {x:2, y:5, errorbar: {max: 6, color: 'purple', linewidth: 2}, color: 'red'}, {x:3, y:3, errorbar: {min: 1, max: 1}, color: 'red'} ]; var data = [ {x:7, y:7, errorbar: {min: 1, max: 1}, color: 'red'}, {x:8, y:5, errorbar: {min: 1, max: 1}, color: 'red'}, {x:10, y:3, errorbar: {min: 1, max: 1}, color: 'red'} ]; new RGraph.SVG.Scatter({ id: 'chart-container', data: [data, data1], options: { gutterLeft: 35, xaxisMin: 0, xaxisMax: 12, xaxisLabels: ['Q1', 'Q2','Q3','Q4'], tickmarksStyle: 'circle' } }).draw(); </script>