CODEWITHSUNDEEP
javascripthighchartstreemap
aggharta
aggharta

Reputation: 273

Selecting Points over multiple Highcharts treemaps

Aim: I have two identical Highcharts treemaps and if I select one point of one chart, I also want to send a select event to the second chart's point with the same id/ same position.

Progress: I followed these answers that tackle the same problem, only for line graphs, and then adopted the fiddle posted there for treemaps. You can find it here as well as below:

$(function () {
    var prevPid = 0;
    var chart = {
        plotOptions: {
            series: {
                allowPointSelect: true,
                point: {
                    'events': {
                        select: function () {
                            var pId = this.series.data.indexOf(this);
                            var chart1 = $('#container').highcharts();
                            var chart2 = $('#container2').highcharts();
                            chart1.series[0].data[pId].setState('select');
                            chart2.series[0].data[pId].setState('select');
                            chart2.series[0].data[prevPid].setState('');
                            prevPid = pId;
                        }
                    }
                }
            }
        },
        series: [{
            type: "treemap",
            data: [{
                name: 'A',
                value: 6,
                colorValue: 1
            }, {
                name: 'B',
                value: 6,
                colorValue: 2
            }, {
                name: 'C',
                value: 4,
                colorValue: 3
            }]
        }]
    };
    $('#container').highcharts(chart);
    $('#container2').highcharts(chart);
});

Problem: However the corresponding point of the other chart is not selected. Any advice on how to fix it?

Upvotes: 2

Views: 675

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

Highcharts v5+ Instead of playing around with states, it's easier to use point.update(), demo: http://jsfiddle.net/BlackLabel/hy12z5u7/

Settings: 

chart: {
  events: {
    load: function() {
      $.each(this.series, function(i, s) {
        $.each(s.data, function(j, p) {
          p.pointAttr = {
            select: {
              color: "red"
            }
          };
        });
      });
    }
  }
},

And action:

    point: {
      'events': {
        click: function() {
          var pId = this.series.data.indexOf(this);
          var chart1 = $('#container').highcharts();
          var chart2 = $('#container2').highcharts();

          chart1.series[0].data[prevPid].update({
            color: chart1.series[0].color
          });
          chart2.series[0].data[prevPid].update({
            color: chart2.series[0].color
          });
          chart1.series[0].data[pId].update({
            color: chart1.series[0].data[pId].pointAttr.select.color
          });
          chart2.series[0].data[pId].update({
            color: chart2.series[0].data[pId].pointAttr.select.color
          });
          prevPid = pId;
        }
      }
    }

Highcharts < v4

The problem is that treemap doesn't have states.select option (API: http://api.highcharts.com/highcharts#plotOptions.treemap.states ) so even, when you force select-ed state, then nothing visually changes on your chart. You can add that state manually: http://jsfiddle.net/tqa6uxdb/3/

    chart: {
        events: {
            load: function() {
                $.each(this.series, function(i, s) {
                   $.each(s.data, function(j, p) {
                        p.pointAttr.select = {
                            fill: "red"
                        }
                   });
                });
            }
        }
    },

Note: your logic for selecting/deselecting points is missing checking if currently clicked point is already clicked.

Upvotes: 2

Related Questions