A Scatter chart as a Bubble chart variant using the new Bubble chart class

The Scatter chart now has a dedicated Bubble chart class as part of the file.

[No canvas support]

This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.scatter.js"></script>
Put this where you want the chart to show up:
<canvas id="cvs" width="600" height="200">
    [No canvas support]
</canvas><br />
<button onclick="var scatter = RGraph.ObjectRegistry.getFirstObjectByType('scatter'); scatter.set('colorsBubbleGraduated', !scatter.get('colorsBubbleGraduated') ); RGraph.redraw();">Toggle gradients</button>
This is the code that generates the chart:
<script>
    // Create and configure the Scatter chart
    scatter = new RGraph.Scatter({
        id: 'cvs',
        data: [
            [30,15,  'red',   'Red bubble tooltip'],
            [60,5,   'blue',  'Blue bubble tooltip'],
            [90,8,   'pink',  'Pink bubble tooltip'],
            [120,19, 'green', 'Green bubble tooltip'],
            [150,14, 'gray',  'Gray bubble tooltip'],
            [50,12,  'red',   'Red bubble tooltip'],
            [180,24, 'gray',  'Gray bubble tooltip'],
            [250,21, 'black', 'Black bubble tooltip']
        ],
        options: {
            xaxisScaleMax: 365,
            xaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
            textSize:14,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            xaxis:false,
            tooltipsHotspot: 10
        }
    }).draw();

    new RGraph.Scatter.Bubble(
        scatter,
            0,   // Minimum
            100, // Maximum
            25,  // Max width
            [50,60,70,80,90,84,86,87] // Bubble data
        ).draw();
    
    // This custom mousemove event listener hides the tooltip if the mouse
    // is not over a mark.
    scatter.canvas.onmousemove = function (e)
    {
        var obj   = e.target.__object__;
        var shape = obj.getShape(e);

        if (!shape) {
            RGraph.hideTooltip();
            RGraph.redraw();
        }
    }
</script>