CODEWITHSUNDEEP
javascriptjqueryhighcharts
arsinawaz
arsinawaz

Reputation: 480

highcharts select multiple points in one go

I want to implement multiple points selection in Highcharts, i have made this sample fiddle of my progress yet, but it seems that the with my code select event is called multiple times depending on how many points have you selected. IS it possible to get all the selected points in one go and call the select event only once?

chart: {
    renderTo: 'container',
    defaultSeriesType: 'scatter',
    events: {
        selection: function(event) {
            for (var i = 0; i < this.series[0].data.length; i++) {
                var point = this.series[0].data[i];
                if (point.x > event.xAxis[0].min &&
                    point.x < event.xAxis[0].max &&
                    point.y > event.yAxis[0].min &&
                    point.y < event.yAxis[0].max) {
                        point.select(true, true);
                    }

            }
            return false;
        }
    },
    zoomType: 'xy'
},
plotOptions: {
    series: {
        allowPointSelect: true,
        point: {
            events: {
                'select': function(event){
                    alert("point selected!");
                }
            }
        }
    }
}

http://jsfiddle.net/u18xkger/

I have found this article on highcharts forum but i am not able to create the required behavior. http://forum.highcharts.com/highcharts-usage/drag-selection-around-multiple-points-t31553/#p110834

Any help is appreciated, thanks in advance.

Upvotes: 0

Views: 2342

Answers (1)

arsinawaz
arsinawaz

Reputation: 480

I got it solved with the help provided by highcharts guys by calling a custom event when the selection has completed.

 function toast(chart, text) {
    chart.toast = chart.renderer.label(text, 100, 120)
        .attr({
            fill: Highcharts.getOptions().colors[0],
            padding: 10,
            r: 5,
            zIndex: 8
        })
        .css({
            color: '#FFFFFF'
        })
        .add();

    setTimeout(function () {
        chart.toast.fadeOut();
    }, 2000);
    setTimeout(function () {
        chart.toast = chart.toast.destroy();
    }, 2500);
}

/**
 * Custom selection handler that selects points and cancels the default zoom behaviour
 */
function selectPointsByDrag(e) {

    // Select points
    Highcharts.each(this.series, function (series) {
        Highcharts.each(series.points, function (point) {
            if (point.x >= e.xAxis[0].min && point.x <= e.xAxis[0].max &&
                    point.y >= e.yAxis[0].min && point.y <= e.yAxis[0].max) {
                point.select(true, true);
            }
        });
    });

    // Fire a custom event
    HighchartsAdapter.fireEvent(this, 'selectedpoints', { points: this.getSelectedPoints() });

    return false; // Don't zoom
}

/**
 * The handler for a custom event, fired from selection event
 */
function selectedPoints(e) {
    // Show a label
    toast(this, '<b>' + e.points.length + ' points selected.</b>' +
        '<br>Click on empty space to deselect.');
}

/**
 * On click, unselect all points
 */
function unselectByClick() {
    var points = this.getSelectedPoints();
    if (points.length > 0) {
        Highcharts.each(points, function (point) {
            point.select(false);
        });
    }
}

chart: {
        type: 'scatter',
        events: {
            selection: selectPointsByDrag,
            selectedpoints: selectedPoints,
            click: unselectByClick
        },
        zoomType: 'xy'
    }

Here is the link for the reference: https://github.com/highslide-software/highcharts.com/issues/4682

Upvotes: 2

Related Questions