highcharts line

draw lines on click

by dirtyd77

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 600px"></div>

CSS

#container {
    border:1px solid;
}

JavaScript

$(function () {
    // the renderer
    var renderer = new Highcharts.Renderer($('#container')[0], 600, 600),
        
        l,
        
        lArr = [],
        
        // boolean to check whether the mouse is down
        isDown = false,
        
        // x anchor (the x point where the mouse was initially clicked)
        anchorX,
        
        // y anchor (the y point where the mouse was initially clicked
        anchorY;

    
    // event handler for mousedown event
    $('#container').mousedown(function (e) {
        isDown = !isDown;
        anchorX = e.pageX;
        anchorY = e.pageY;
        
        if(isDown){
            // create new
             l = renderer.path(['M', anchorX, anchorY, 'L', anchorX, anchorY])
            .attr({
                'stroke-width': 2,
                stroke: 'red'
            })
            .add();
            
            lArr = ['M', anchorX, anchorY, 'L', anchorX, anchorY];
        }
        else{
            lArr[lArr.length - 2] = anchorX;
            lArr[lArr.length - 1] = anchorY;
            l.attr('d', lArr.join(' '));
        }
        
    }); 

    // event handler for mousemove event
    $('#container').mousemove(function (e) {

        if (isDown) {
            
            lArr[lArr.length - 2] = e.pageX;
            lArr[lArr.length - 1] = e.pageY;
            l.attr('d', lArr.join(' '));
        }

    });

});