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]
This is the code that generates the chart:
    window.onload = function ()
        var over_circle = false;

        var 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'],
                textAccessible: true
        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})
                    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,

Share on Facebook Share on Twitter

« Back