How to create Bubble charts

A guide for using the Scatter chart to create Bubble charts. Bubble charts have an advantage of being able to show a third datapoint (the width of the bubble). You can use this third datapoint to show a variety of things.

[No canvas support]

Bubble charts can be created using the Scatter chart. It's an additional object that must be created that uses the Scatter chart and creates the "bubbles" on top of those coordinates.

The necessary source code is shown below.

  1. Create the Scatter chart but don't call .draw().
  2. Create the Bubble chart object.
  3. Call the .draw() method on this object instead.

<script>
    window.onload = function (e)
    {
        var scatter = new RGraph.Scatter({
            id: 'cvs',
            data: [
                [125,35,'red'],
                [180,25,'blue'],
                [213,42,'green'],
                [344,31,'purple'],
                [144,25,'pink'],
                [255,62,'lime'],
                [35,45,'gray'],
                [56,31]
            ],
            options: {
                xaxisScaleMax: 365,
                textSize: 14,
                xaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
            }
        });


        var bubble = new RGraph.Scatter.Bubble(
            scatter,
            0,  // Minimum
            50, 
            50, // Max width
            [5,10,15,20,25,30,35,40]
        );
        bubble.draw();
    }
</script>