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="resizeMove" class="type">Change to Move</button>
<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 () {

    $('#resizeMove').click(function(){
       $(this).val() 
    });
    
    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,armageddon
    600),
        renderType = 'rect',
        shape,
        shapes = [],
        newShape = false,
        isDown = false,
        isOver = false,
        isResizing = true,
        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){

            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){
                    e.preventDefault();
                    e.stopPropagation();
                    for(var i = 0; i < shapes.length; i++){
                        if(shapes[i] && this === shapes[i].element){
                            shapes[i].destroy();
                            break;
                        }
                    }
                    isDown = false;
...