How to create Bubble charts

  Read comments...

Summary
A guide for using the Scatter chart to create Bubble charts.

[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: {
                xmax: 365,
                textAccessible: true,
                textSize: 14,
                labels: ['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>
Share RGraph
X

Comments