Highcharts Multiple Point Selection - Access/update Getselectedpoints Array Immediately After Point Select

I have a HighCharts linegraph where I am allowing multiple point selections. After each selection/de-selection is made, I want to perform an action based on all currently selected

Solution 1:

You can create array with selected points, and just push/overwrite points which are inside. Demo: http://jsfiddle.net/QJ75h/2/

var $report = $('#report'),
    selectedPoints = [];

// create the chart
$('#container').highcharts({
    chart: {},
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    plotOptions: {
        series: {
            allowPointSelect: true,
            point: {
                events: {
                    select: function (event) {
                        var chart = this.series.chart;

                        var selectedPointsStr = "";
                        if (event.accumulate) {
                            selectedPoints.push(this);
                        } else {
                            selectedPoints = [this];
                        }
                        $.each(selectedPoints, function (i, value) {
                            selectedPointsStr += "<br>" + value.category;
                        });
                        $report.html(selectedPointsStr);
                    }
                }
            }
        }
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});

Solution 2:

If chart.getSelectedPoints() returns all the other points selected and the this in the select callback is the point that was just selected, why not just combine them to get all the selected points?

select: function() {
    var chart = $('#container').highcharts();

    // when is the chart object updated? after this function finshes?var selectedPoints = chart.getSelectedPoints();
    selectedPoints.push(this); // now it's got all the points!var selectedPointsStr = "";
    $.each(selectedPoints, function(i, value) {
        selectedPointsStr += "<br>"+value.category;
    });

    $report.html(selectedPointsStr);                            
}

Fiddle here.

Or, you could resort to a little setTimeout action:

select: function() {

    setTimeout(function(){

        var chart = $('#container').highcharts();

        // when is the chart object updated? after this function finshes?var selectedPoints = chart.getSelectedPoints();

        var selectedPointsStr = "";
        $.each(selectedPoints, function(i, value) {
            selectedPointsStr += "<br>"+value.category;
        });

        $report.html(selectedPointsStr);                            
    }, 100);
}

Another fiddle.