A Scatter chart with the ability to add markers

You can click on the Scatter chart to add a red circle. When the circles are then clicked on nothing happens.

[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.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: {
            marginLeft: 25,
            xaxisScaleMax: 365,
            xaxisLabels: ['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({
                colorsFill: 'red',
                tooltips: ['A tooltip from the circle with UID: ' + circle.uid],
                shadow: true,
                shadowColor: '#aaa',
                shadowBlur:1,
                shadowOffsetx:2,
                shadowOffsety:2
            }).draw();
        }
    }
</script>