chart tool - polyline

draw a shape with lines, stops when the user clicks on the same point twice

by Amanda Williamson

HTML

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

CSS

#container {
    border:1px solid;
}

JavaScript

$(function () {
    var renderer = new Highcharts.Renderer($('#container')[0], 600, 600),
        pathArray=[],       
        l,
        isClicking = false,
        firstClick = true,
        anchorX, anchorY,        
        lastX,
        lastY,
        x,y;

    $('#container').mousedown(function (e) {       
        
        if (firstClick) {
            isClicking = true;
            anchorX = e.pageX;
            anchorY = e.pageY;            
            pathArray = ['M', anchorX, anchorY];
            pathArray.push('L', anchorX, anchorY);
            //console.log('firstClick');
            //console.log(pathArray);
            l = renderer.path(pathArray)
                .attr({
                    'stroke-width': 5,
                    stroke: 'red'
                }).add();
            firstClick = !firstClick;
        } 
        else {
            if (lastX === e.pageX &&
               lastY === e.pageY) {
                isClicking = false;
                lastX = null;
                lastY = null;
                l.attr( {fill: 'blue'} ).add();
                firstClick = true;
            } else {
                lastX = e.pageX;
                lastY = e.pageY;
                pathArray.push('L', x, y);
            }
        }
        
    });

    $('#container').mousemove(function (e) {
        if(isClicking){
            l.attr('d', pathArray.join(' '));
            x = pathArray[pathArray.length-2] = e.pageX;
            y = pathArray[pathArray.length-1] = e.pageY;
        }
    }); 
     
});