How to create Bubble charts

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!

Comments

© Copyright Richard Heyes 2008-2017 Sitemap RGraph was created by Richard Heyes