0

Using HighMaps we are trying to let users select multiple areas. This works fine if the user clicks and then does SHIFT-click on the other areas they want. In HighCharts we can use a draggable box to select multiple points (like in a scatter chart). I would like to allow this similar drag to select option in HighMaps. A naive example is here. This is non functional.

I think the solution involves what is also used for the mouse hover effect. Such that when the mouse cursor enters the area the entire area is highlighted. If I could modify this code to my purposes such that the draggable box extent would be the trigger for hover as well.

chart: {
  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'
},
wergeld
  • 14,332
  • 8
  • 51
  • 81

1 Answers1

0

You need to compare the right x and y values:

events: {
    selection: function(event) {
        for (var i = 0; i < this.series[0].data.length; i++) {
            var point = this.series[0].data[i],
                xAxis = event.xAxis[0],
                yAxis = event.yAxis[0];

            if (point.graphic) {
                if (point._minX > xAxis.min &&
                    point._maxX < xAxis.max &&
                    point._minY > yAxis.min &&
                    point._maxY < yAxis.max) {

                    point.select(true, true);
                }
            }
        }
        return false;
    }
}

Live demo: https://jsfiddle.net/BlackLabel/m4ubd0z2/

ppotaczek
  • 36,341
  • 2
  • 14
  • 24
  • This almost works. It requires the entirety of the shape to be within the draggable box. For example - try and select the USA or try and select the UK. I would expect that if any portion of draggable box intersects the area's region it would be included in the selection. – wergeld May 13 '19 at 11:11
  • 1
    Hi @wergeld, Yes, I thought it was supposed to be like that. Please check this example: https://jsfiddle.net/BlackLabel/k5nduz1r/ – ppotaczek May 13 '19 at 11:37
  • That is definitely closer. There are still several issues I think related to using x/y for the shape of the country. For example, if you draw a box wholly within Australia, it also selects France. Similarly if you draw a box wholly within the USA it also selects Canada. – wergeld May 13 '19 at 11:49
  • @wergeld, Shapes of the countries are irregular and it is very hard to compare coordinates of them with selected rectangle. I tried to simplify the shapes of the countries to rectangles, but then there are problems with the separated paths. We could render the separated paths as a different elements, but the result will not be accurate anyway. – ppotaczek May 13 '19 at 16:50
  • Yes, this is my issue. I was hoping the hover code used by highmaps might help but it is onlly tracking the mouse's single x/y. – wergeld May 13 '19 at 16:59
  • @wergeld, Yes, there is no easy solution for that. You would have to create some algorithm to detect intersection between a rectangle and a polygon. Similar topic: https://stackoverflow.com/questions/7136547/method-to-detect-intersection-between-a-rectangle-and-a-polygon – ppotaczek May 14 '19 at 14:49