The Scatter chart now has a dedicated Bubble chart class as part of the file.
<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
var 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: {
xmax: 365,
labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
'text.size':14,
backgroundGridVlines: false,
backgroundGridBorder: false,
xaxis:false,
tooltipsHotspot: 10
}
}).draw()
var bubble = 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 onmousemove 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>