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: {
//errorbarsLinewidth: 5,
//errorbarsCapwidth: 20,
//errorbarsColor: 'pink',
marginLeft: 35,
xaxisScaleMin: 0,
xaxisScaleMax: 12,
xaxisLabels: ['Q1', 'Q2','Q3','Q4'],
tickmarksStyle: 'circle'
}
}).draw();
</script>