An SVG Scatter chart with errorbars

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 colored individually if required.

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:
    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'