You can click on the Scatter chart to add a red circle. When the circles are then clicked on nothing happens.
This goes in the documents header:<script src="RGraph.common.core.js"></script> <script src="RGraph.common.dynamic.js"></script> <script src="RGraph.common.circle.js"></script> <script src="RGraph.drawing.circle.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>
This is the code that generates the chart:
<script>
over_circle = false;
scatter = new RGraph.Scatter({
id: 'cvs',
data: [[15,91]],
options: {
gutterLeft: 25,
xmax: 365,
labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
}
}).draw();
scatter.canvas.onmousemove = function (e)
{
var obj = RGraph.ObjectRegistry.getObjectByXY(e);
if (obj && obj.type == 'drawing.circle') {
over_circle = obj;
e.target.style.cursor = 'pointer';
} else {
over_circle = false;
e.target.style.cursor = 'default';
}
}
scatter.canvas.onclick = function (e)
{
if (over_circle == false) {
var obj = scatter;
var xValue = obj.getXValue(e);
var yValue = obj.getYValue(e);
var xCoord = obj.getXCoord(xValue);
var yCoord = obj.getYCoord(yValue);
var circle = new RGraph.Drawing.Circle({id: 'cvs', x: xCoord, y: yCoord, radius: 15})
circle.set({
fillstyle: 'Gradient(white:rgba(255,128,128,0.75):rgba(255,0,0,0.5))',
tooltips: ['A tooltip from the circle with UID: ' + circle.uid],
shadow: true,
shadowBlur:1,
shadowOffsetx:2,
shadowOffsety:2
}).draw();
}
}
</script>