Organization Chart - Drilldown

[chrisgarside]

Description of the feature

The current organisation chart is great if you have 20 people in your organisation. Even as a medium sized company with 150 staff in 6 divisions and 25 departments it becomes impossible to visualise all nodes at once. I was really excited to try and implement HC org chart this weekend but found that with our skill levels and out of the box, its not suitable for larger companies.

I do understand the workaround of data replacement from button fired events but this does become more complicated when the data or org structure is dynamic. Drill down support would be much appreciated.

Library related to the feature

Highcharts

Proof of Concept/ Live example for the feature

Highcharts.chart('container', {
    chart: {
        height:600,
        width:1300,
        inverted: true
    },

    title: {
        text: 'Highcharts Org Chart'
    },
    series: [{
        type: 'organization',
        name: 'Highsoft',
       // keys: ['from', 'to','drilldown'],
        data: [
            {	
            	from:"CO",
            	to:"DIV01",
              drilldown:"DIV01"
            },
            {
            	from:'CO',
              to:'DIV02',
              drilldown:'DIV02'
            },
            {
            	from:'CO',
              to:'DIV03',
              drilldown:'DIV03'
            },
            {
            	from:'CO',
              to:'DIV04',
              drilldown:'DIV04'
            },
            {
            	from:'CO',
              to:'DIV05',
              drilldown:'DIV05'
            },
            {
            	from:'CO',
              to:'DIV06',
              drilldown:'DIV06'
            }
        ],
        levels: [{
            level: 0,
            color: 'silver',
            dataLabels: {
                color: 'black'
            },
            height: 25
        }, {
            level: 1,
            color: 'silver',
            dataLabels: {
                color: 'black'
            },
            height: 25
        }, {
            level: 2,
            color: '#980104'
        }, {
            level: 4,
            color: '#359154'
        }],
        nodes: [
        		{id:'DIV01', title:'Div Hd 1', name:'Div. 1',layout:'hanging'},
            {id:'DIV02', title:'Div Hd 2', name:'Div. 2',layout:'hanging'},
            {id:'DIV03', title:'Div Hd 3', name:'Div. 3',layout:'hanging'},
            {id:'DIV04', title:'Div Hd 4', name:'Div. 4',layout:'hanging'},
            {id:'DIV05', title:'Div Hd 5', name:'Div. 5',layout:'hanging'},
            {id:'DIV06', title:'Div Hd 6', name:'Div. 6',layout:'hanging'}
				],
        colorByPoint: false,
        color: '#007ad0',
        dataLabels: {
            color: 'white'
        						},
        borderColor: 'white',
        nodeWidth: 120
    }],
    drilldown: {
     		allowPointDrilldown: true,
        series: [
            {
                id: "DIV01",
                name: "DIV01",
                keys: ['from', 'to'],
                data: [
                      ['DIV01','DEP01']
                ],
                nodes: [
                    {id:'DEP01', title:'Dept Hd 1', name:'Dept. 1',layout:'hanging'}
								]
            },
            { 
								id: "DIV02",
								name: "DIV02",
                keys: ['from', 'to'],
                data: [
                    ['DIV02','DEP02']
                ],
                 nodes: [
                    {id:'DEP02', title:'Dept Hd 2', name:'Dept. 2',layout:'hanging'}
								]
            },
            {
								id: "DIV03",
								name: "DIV03",
                keys: ['from', 'to'],
                data: [
                      ['DIV03','DEP03']
                ],
                 nodes: [
                    {id:'DEP03', title:'Dept Hd 3', name:'Dept. 3',layout:'hanging'}
							]
            },
            {
								id: "DIV04",
								name: "DIV04",
                keys: ['from', 'to'],
                data: [
                    ['DIV04','DEP04']
                ],
                 nodes: [
                    {id:'DEP04', title:'Dept Hd 4', name:'Dept. 4',layout:'hanging'}
							]
            },
            { 
								id: "DIV05",
								name: "DIV05",
                keys: ['from', 'to'],
                data: [
                       ['DIV05','DEP05']
                ],
                 nodes: [
                    {id:'DEP05', title:'Dept Hd 5', name:'Dept. 5',layout:'hanging'}
							]
            },
            { 
								id: "DIV06",
								name: "DIV06",
                keys: ['from', 'to'],
                data: [
                    ['DIV06','DEP06']
                ],
                 nodes: [
                    {id:'DEP06', title:'Dept Hd 6', name:'Dept. 6',layout:'hanging'}
							]
            }
        ]
    },
    tooltip: {
        outside: true
    },
    exporting: {
        allowHTML: true,
        sourceWidth: 800,
        sourceHeight: 600
    }

});

[TorsteinHonsi]

Thank you for your suggestion!

Actually drilldown already works. But instead of defining the drilldown on the links, it needs to be set on the nodes. See https://jsfiddle.net/highcharts/bgx83ze4/.

There's a bug though - after drilling up, the top-level nodes (data labels) are not showing.

I'm putting this issue in the backlog so that one of our devs can

• Fix the drill-up bug
• Add this demo to our samples including a link from the API so that the next user will find it.

For the records, we should also consider something equivalent to treemap and sunburst's allowTraversingTree. It may be not be straight forward in sankey/org chart though, because links can go between siblings and both up and down the tree.

[chrisgarside]

Hi Torstein,

Brilliant, appreciate if that sample code could be added to the drilldown examples.

I look forward to the fix.

Regards
Chris