CODEWITHSUNDEEP
javascriptalgorithmhighcharts
Pavan
Pavan

Reputation: 79

Working with Highchart Treemaps (drilldown)

I have a problem with HighChart Treemaps. Ive been working on a custom algorithm with equal tiles. Though i got my custom algorithm to work (Thanks to other SO questions) , I'm not able to achieve drilldown. The custom algorithm works perfectly for the parent nodes. When I click on a parent, Only the latest child covers the entire map. I tried customizing the algo, but it went nowhere.

Any help is highly appreciated. Code posted on JSfiddle. And the green tile has children. Purple parent doesn't have one.

function myFunction(parent, children) {
var x = parent.x,
        y = parent.y,
    w=20,
    h=20,i,j,
        childrenAreas = [];
        console.log(parent);
        console.log(children);
Highcharts.each(children, function(child) {   


    if(child.level == 1)
    {
    //console.log("if part"+child.i+" "+x+ " "+y);
    if(x>=parent.width)
       {
       x=parent.x;
       y+=h;

       }
       else
       {
     x+=w;
   }

    }
    else
    {
         //console.log(child);


    } 
childrenAreas.push({
        x: x,
        y: y,
        width: w,
        height: h
    });
 //console.log(parent.x+w);



});
//console.log(childrenAreas);
return childrenAreas;

};

Complete code on JSfiddle

TIA

Upvotes: 1

Views: 983

Answers (1)

Grzegorz Blachliński
Grzegorz Blachliński

Reputation: 5222

I think that you problem is connected with how drilldown works in treemap. Your layout algorithm worked well, but when you are clicking on your point, the chart is rescalling (functionality similar to zooming into your point) and that is the reason why you have different size of your points.

You can make some calculations that will change your second level points width, so after rescalling they will have the same width as your previous level. 

    Highcharts.each(children, function(child, i) {
  if (child.level === 1) {
    width = parent.width;
    height = parent.height;
    x = parent.x + i * w;
    childrenAreas.push({
      x: x,
      y: y,
      width: w,
      height: h
    });
  } else {
    pointW = w * w / width;
    pointH = h * h / height;
    x = parent.x + i * pointW;
    childrenAreas.push({
      x: x,
      y: y,
      width: pointW,
      height: pointH
    });
  }
});

Here you can see an example how it can work: http://jsfiddle.net/99rbh2qj/8/

You can also use standard Highcharts drilldown module in your chart: http://jsfiddle.net/99rbh2qj/5/

Best regards.

Upvotes: 1

Related Questions