An SVG Scatter/Bubble chart

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>
    dataset1 = [
        {x: 10, y: 5, z: 10, color: 'red'},
        {x: 20, y: 8, z: 8, color: 'yellow'},
        {x: 30, y: 2, z: 3, color: 'blue'},
        {x: 40, y: 5, z: 5, color: 'pink'},
        {x: 50, y: 3, z: 6, color: 'black'},
        {x: 60, y: 8, z: 1, color: 'magenta'},
        {x: 70, y: 9, z: 2, color: 'cyan'},
        {x: 80, y: 4, z: 8, color: 'red'}
    ];

    var scatter = new RGraph.SVG.Scatter({
        id: 'chart-container',
        data: [dataset1],
        options: {
            gutterTop: 50,
            xaxisMax: 100,
            xaxisLabels: [
                'Lower half','Upper half'
            ],

            bubble: true,
            bubbleMaxValue: 10,
            bubbleMaxRadius: 50,
            bubbleColorsSolid: false,

            backgroundGridVlines: false,
            backgroundGridBorder: false,
            yaxis: false,
            colors: ['blue', 'red'],
            title: 'A Scatter/Bubble chart'
        }
    }).draw();
</script>

« Back