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 data point (the width of the bubble). You can use this third data point 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>