AntonZ AntonZ - 4 months ago 28
HTML Question

Hide/Show DIV upon drilldown in Highcharts

I want to be able to hide/show a relevant DIV when drilling down on a Highcharts pie chart.

For example, I have 5 pieces of my pie, and 6 DIVs.

I want to show DIV 6 (called DIVGENERAL) when its not drilled down, but then the section specific DIV when drilled down on a section.

For example If I Drill down on Account 1, I want to hide DIV 6 and display DIV1, If I drill down on Account 4, I want to hide DIV 6 and display DIV4

I have been able to get it to succesfully HIDE DIV 6 when drilling down, and to SHOW it when you drill back up.

If I specify a DIV in the drill down function it will hide it, but I need to be able to tell it which DIV to hide based on which section of the pie has been drilled down on.

I have created a FIDDLE that shows where I am to date.

FIDDLE

events: {
drilldown: function (e) {
alert('Drill Down');
document.getElementById('Account 1').style.display = "block";
document.getElementById('AccountGeneral').style.display = "none";

},
drillup: function (e) {
alert('Drill Up');
document.getElementById('Account 1').style.display = "none";
document.getElementById('AccountGeneral').style.display = "block";

}
}


Thanks

Answer

Please have a look at updated fiddle code:

http://jsfiddle.net/gqu1u940/5/

I have added an JS object for mapping chart section to its panel like:

var panelMapping = {
    "Account 1": "Panel1",
    "Account 2": "Panel2",
    "Account 3": "Panel3",
    "Account 4": "Panel4",
    "Account 5": "Panel5"
  }

and in drilldown: event handler we can get which section got drilled down as:

drilldown: function(e) {
    alert('Drill Down : ' + e.point.name);
    var associatedPanelId = panelMapping[e.point.name];
    document.getElementById(associatedPanelId).style.display = "block";
    document.getElementById('Panel6').style.display = "none";
},
drillup: function(e) {
    alert('Drill Up');
    var panels = document.getElementsByClassName("Panel");
    for (var i = 0; i < panels.length; i++) {
        panels[i].style.display = 'none';
    }
    document.getElementById('Panel6').style.display = "block";
}

Note: I have added a class Panel to all the panel from Panel1 to Panel5 which i am using while hiding all the panel while drillup event