# 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.

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>

« Back