Summary
RGraph demo page: An SVG Scatter chart with errorbars

RGraph demo: An SVG Scatter chart with errorbars

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

« Back