An SVG Scatter chart with errorbars
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