1

I've used Highcharts documentation to enable a drag selection for a chart. I'm trying to expand this so that whatever points I've selected on my first chart, will also be selected on the other charts on the page (the x axis matches).

I've figured out a method to do this, & it works well for 2 or 3 highcharts on a page, but it gets some severe lag when i select many points (each chart is about 1500 points total) with 4 or more highcharts. It could be because I use a nested for loop, but I was wondering if anyone had any tips for improving the efficiency of this code (or if this is even the issue). The first function is the one provided in the Highcharts documentation; the second function (updateCharts()) is the one I did.

I've never used highcharts, or programmed much in javascript before, so I'm still a bit unfamiliar with how all this works.

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
    Highcharts.fireEvent(this, 'selectedpoints', { points: this.getSelectedPoints() });
    updateCharts(this);

    return false; // Don't zoom
};

function updateCharts(curr_chart){

    var count;
    var counter;
    var allChartArray = [chart, chart1, chart2, chart3];
    var indexOfCurrentChart = allChartArray.indexOf(curr_chart);

    if (indexOfCurrentChart > -1) {
        allChartArray.splice(indexOfCurrentChart, 1);
    };

    bla = curr_chart.getSelectedPoints();

    for(count = 0; count < allChartArray.length; count++){
        for(counter = 0; counter < bla.length; counter++){
            allChartArray[count].series[0].data[bla[counter].index].select(true, true)
        };
    };

};
user3479118
  • 27
  • 8
  • Use a browser profiler and see which part of your program is responsible for lagging. If the indices for points are the same, you can select points for the other chart in the same loop. Do not use getSelectedPoints() - every time you call it it needs to loop over all points and filter them - instead create an array and push selected points (while looping). You can also set some processing animation, loop chunks, etc. If it is not enough you can do some data preprocessing (kdtree) https://stackoverflow.com/questions/34270616/fast-algorithm-to-find-all-points-inside-a-rectangle – morganfree Jun 16 '17 at 13:26

0 Answers0