gistfile1.txt

/**
 * Experimental Draggable points plugin
 * Revised 2012-02-08
 *
 * On Saving this jsbin, remember to update http://jsfiddle.net/highcharts/AyUbx/
 */
(function(Highcharts) {
    var addEvent = Highcharts.addEvent,
        each = Highcharts.each;
    
    Highcharts.Chart.prototype.callbacks.push(function (chart) {        
        
        var container = chart.container,
            dragPoint,
            dragY,
            dragPlotY;
        
        chart.redraw(); // kill animation (why was this again?)
        
        addEvent(container, 'mousedown', function(e) {
            var hoverPoint = chart.hoverPoint;
            if (hoverPoint && hoverPoint.series.options.draggable) {
                dragPoint = hoverPoint;
                dragY = e.pageY;
                dragPlotY = dragPoint.plotY + (chart.plotHeight - (dragPoint.yBottom || chart.plotHeight));
            }
        });
        
        addEvent(container, 'mousemove', function(e) {
            if (dragPoint) {
                var deltaY = dragY - e.pageY,
                    newPlotY = chart.plotHeight - dragPlotY + deltaY,
                    newY = dragPoint.series.yAxis.translate(newPlotY, true),
                    series = dragPoint.series;
                dragPoint.update(newY, false);
                chart.tooltip.refresh(dragPoint);
                if (series.stackKey) {
                    chart.redraw();
                } else {
                    series.redraw();
                }
            }
        });
        
        function drop(e) {
            if (dragPoint) {
                var deltaY = dragY - e.pageY,
                    newPlotY = chart.plotHeight - dragPlotY + deltaY,
                    newY = dragPoint.series.yAxis.translate(newPlotY, true);            
                
                dragPoint.firePointEvent('drop');
                dragPoint.update(newY);
                
                dragPoint = dragY = undefined;
            }
        }
        addEvent(document, 'mouseup', drop);
        addEvent(container, 'mouseleave', drop);
    });
    
    /**
     * Extend the column chart tracker by visualizing the tracker object for small points
     */
    var colProto = Highcharts.seriesTypes.column.prototype,
        baseDrawTracker = colProto.drawTracker;
    
    colProto.drawTracker = function() {
        var series = this;
        baseDrawTracker.apply(series);
        
        each(series.points, function(point) {
            point.tracker.attr(point.shapeArgs.height < 3 ? {
                'stroke': 'black',
                'stroke-width': 2,
                'dashstyle': 'shortdot'
            } : {
                'stroke-width': 0
            });
        });
    };
    
})(Highcharts);




var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container',
        animation: false
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
        
    plotOptions: {
        series: {
            cursor: 'ns-resize',
            point: {
                events: {
                    drop: function() {
                        $('#report').html(
                            this.category + ' was set to ' + Highcharts.numberFormat(this.y, 2)
                        );
                    }
                }
            }
        },
        column: {
            stacking: 'normal'
        }
    },
    
    tooltip: {
        yDecimals: 2
    },

    series: [{
        data: [0, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        draggable: true,
        type: 'column'
    }, {
        data: [0, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4].reverse(),
        draggable: true,
        type: 'column'
    }, {
        data: [0, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        draggable: true
    }]

});