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>
    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
            }
        }).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>

Share on Facebook Share on Twitter

« Back