CODEWITHSUNDEEP
javascriptperformancehighchartstreemap
S Kumar
S Kumar

Reputation: 595

Selection change in Tree Map in High Chart

jsfiddle link : click here

There are two issues needs to be resolved here:

Issue 1: Clicking on selection2 and selection 3 is working fine but clicking back on Selection1 does not reflect the changes.

Issue 2: To return different dataLabel for different selections, I have written the code, and it seems to be working fine but while debugging I found that everytime a selection is made, following code is executed twice. 

formatter: function () {
  if(value=="selection3"){
    return '<b>'+this.point.name + '<br/>'+ this.point.value + '%</b> ' 
  }else{
    return '<b>'+this.point.name + '<br/>'+ this.point.value + '</b> '
  }
},

My question is how this formatter function works and why the if condition is executed twice for each selection.

Appreciate your help.

Upvotes: 1

Views: 110

Answers (1)

RQman
RQman

Reputation: 469

According Issue 1:

As @ewolden mentioned

Issue one is caused by selection1Data being set in the initialization, and updated by reference

to fix it you can use setData(data [, redraw] [, animation] [, updatePoints]) method to update your data with updatePoints set to false (For all series changes)

$('#selection1').click(function() {
  value = "selection1";
  chart.series[0].setData(selection1Data, true, {}, false);
});

updatePoints (Default: true)

When the updated data is the same length as the existing data, points will be updated instead of replaced. This allows updating with animation and performs better. In this case, the original array is not passed by reference. Set false to prevent.

also using setData more preferable than update

.. **[update]** method is more performance expensive than some other utility methods like Highcharts.Series#setData or Highcharts.Series#setVisible.

According Issue 2:

Function formatter will be called for each series which will be provided. In your example chart contains two series and that cause why

... everytime a selection is made, following code is executed twice.

Upvotes: 4

Related Questions