Dynamic PlotLine in Highcharts

Question

I have a scatter plot with a horizontal PlotLine. I would like people to be able to drag the PlotLine. The y axis value is used as a threshold value to generate a column chart (the column chart is initially generated with a default value for the threshold). So far I have the draggable plotline working using code that I found on the Highcharts forum:

var line,
    clickX,
    clickY;

var start= function (e) {
    $(document).bind({
        'mousemove.line': step,
        'mouseup.line': stop
    });
    clickY=e.pageY - line.translateY;
}

var step = function (e) {
    line.translate(e.pageX - clickX, e.pageY - clickY)
}

var stop = function (e) {
    var chart = $('#container').highcharts();
    var max_y_axis = chart.yAxis[0].max;
    var newVal = chart.yAxis[0].toValue(e.pageY - clickY + chart.plotTop) + chart.yAxis[0].plotLinesAndBands[0].options.value)- max_y_axis;
    $('#report').text('Value: ' + newVal);
    $(document).unbind('.line');
}

This works fine and I can see that the threshold value is being produced correctly. However, I would like to access the value newVal (the threshold) elsewhere in my code, ie to create the 2nd chart. Does anyone have an idea of how I can get newVal outside of the function?

Answer 1

Just increase its scope:

var line,
    clickX,
    clickY,
    newVal;

var start= function (e) {
    $(document).bind({
        'mousemove.line': step,
        'mouseup.line': stop
    });
    clickY=e.pageY - line.translateY;
}

var step = function (e) {
    line.translate(e.pageX - clickX, e.pageY - clickY)
}

var stop = function (e) {
    var chart = $('#container').highcharts();
    var max_y_axis = chart.yAxis[0].max;
    newVal = chart.yAxis[0].toValue(e.pageY - clickY + chart.plotTop) + chart.yAxis[0].plotLinesAndBands[0].options.value)- max_y_axis;
    $('#report').text('Value: ' + newVal);
    $(document).unbind('.line');
}