Highcharts Demo

author(s): Torstein Hønsi

by Jakub

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div>X Value: <span id="x_value"></span>
</div>
<div id="container" style="height: 400px"></div>

JavaScript

$(function () {

                function draggablePlotLine(axis, plotLineId) {
                    var clickX;

                    var getPlotLine = function () {
                        for (var i = 0; i < axis.plotLinesAndBands.length; i++) {
                            if (axis.plotLinesAndBands[i].id === plotLineId) {
                                return axis.plotLinesAndBands[i];
                            }
                        }
                    };

                    var getValue = function() {
                        var plotLine = getPlotLine();
                        var translation = plotLine.svgElem.translateX;
                        var new_value = axis.toValue(translation) - axis.toValue(0) + plotLine.options.value;
                        new_value = Math.max(axis.min, Math.min(axis.max, new_value));
                        return new_value;
                    };

                    var drag_start = function (e) {
                        $(document).bind({
                            'mousemove.line': drag_step,
                            'mouseup.line': drag_stop
                        });

                        var plotLine = getPlotLine();
                        clickX = e.pageX - plotLine.svgElem.translateX;
                        if (plotLine.options.onDragStart) {
                            plotLine.options.onDragStart(getValue());
                        }
                    };

                    var drag_step = function (e) {
                        var plotLine = getPlotLine();
                        var new_translation = e.pageX - clickX;
                        var new_value = axis.toValue(new_translation) - axis.toValue(0) + plotLine.options.value;
                        new_value = Math.max(axis.min, Math.min(axis.max, new_value));
                        new_value = Math.round(new_value);
                        new_translation = axis.toPixels(new_value + axis.toValue(0) - plotLine.options.value);
        ...