Highcharts Demo

author(s): Torstein Hønsi

by dirtyd77

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<p>Right click to delete</p>
<button id="rect" class="type">Rect</button>
<button id="circle" class="type">Circle</button>
<div id="container" style="height: 600px; width:600px;"></div>

CSS

#container {
    border:1px solid;
}

JavaScript

$(function () {

    function getRadius(x1, x2, y1, y2) {
        return (Math.sqrt((Math.pow(x2 - x1, 2) + (Math.pow(y2 - y1, 2)))));
    }

    var renderer = new Highcharts.Renderer(
    $('#container')[0],
    600,
    600),
        renderType = 'rect',
        shape,
        shapes = [],
        newShape = false,
        isDown = false,
        isOver = false,
        anchorX = 0,
        anchorY = 0,
        x,
        y,
        width,
        height;


    $('.type').click(function () {
        renderType = $(this).attr('id');
    });

    $('#container').mousedown(function (e) {

        // only accept left mouse click
        
        if(e.button === 0){
            
        // if(!renderType) return false;        
        isDown = !isDown;

        if (isDown) {
            
            // get anchors
            anchorX = e.offsetX;
            anchorY = e.offsetY;

            switch (renderType) {
                case 'rect':
                    // add new shape
                    shape = renderer.rect(e.offsetX, e.offsetX, 0, 0, 5)
                    break;

                case 'circle':
                    shape = renderer.circle(anchorX, anchorY, 0)
                    break;
            }
            
            shape.attr({
                'stroke-width': 10,
                stroke: 'red',
                fill: 'yellow',
                zIndex: 3,
                class: 'annotation'
            }).on('contextmenu', function (e){
                var el = this;
                
                e.preventDefault();
                e.stopPropagation();
                for(var i = 0; i < shapes.length; i++){
                    if(shapes[i] && el === shapes[i].element){
                        shapes[i].destroy();
                        break;
                    }
                }
                isDown = false;
            })
            .add();
            
            shapes.push(shape);
            }
        }
    });


   ...