Drilldown multiple levels Highchart

Question

We like to Drilldown on multiple levels in Highchart. Is there already an example in Highchart?

Currently used code:

$(div).highcharts({
    chart: {type: 'column'},
    credits: {enabled: false},          
    title: {text: title},
    xAxis: {
        categories: [
            'Instroom',
            'Rijdend',
            'Úitstroom'
        ]
    },
    yAxis: {title: {text: ytitle}},
    legend: {enabled: true},
    plotOptions: {series: { borderWidth: 1, dataLabels: {enabled: true,}}},
    series: first,
    drilldown: {
        series: drillDownObject(second)
    }
});

Paweł Fus · Accepted Answer · 2021-02-17T12:18:07.173

37

It's possible, just add all drilldown series, then create a connection between point and drilldown. See: https://jsfiddle.net/BlackLabel/rpt741xc/

    series: [{
        name: 'Things',
        colorByPoint: true,
        data: [{
            name: 'Animals',
            y: 5,
            drilldown: 'animals'
        }]
    }],
    drilldown: {
        series: [{
            id: 'animals',
            name: 'Animals',
            data: [{
                name: 'Cats',
                y: 4,
                drilldown: 'cats'
            }, ['Dogs', 2],
                ['Cows', 1],
                ['Sheep', 2],
                ['Pigs', 1]
            ]
        }, {

            id: 'cats',
            data: [1, 2, 3]
        }]
    }

edited Feb 17 '21 at 12:18

answered Apr 18 '14 at 12:35

Paweł Fus

44,795
3
61
77

How do I do it if Animal has 2 children and those children have 2 children each? – Julian Aug 15 '17 at 13:35
You can add as many drilldowns as you want to, for example: http://jsfiddle.net/ed3ob9au/107/ – Paweł Fus Aug 16 '17 at 09:26
How to identify a drill down level – anand raj Nov 22 '17 at 05:09
It's stored in series options, for example: `chart.series[0].options._levelNumber` – Paweł Fus Nov 22 '17 at 13:21
the jsfiddle needs https in the script tags these days: [https://jsfiddle.net/hafsnbu7/](https://jsfiddle.net/hafsnbu7/) – csum Feb 12 '21 at 18:38

score 8 · Answer 2 · edited Oct 15 '14 at 23:04

For a mutiple levels pie chart check out http://jsfiddle.net/bge14m3a/1/

$(function () {

    // Create the chart
    $('#container').highcharts({
        chart: {
            type: 'pie'
        },
        title: {
            text: 'Deep drilldown'
        },
        xAxis: {
            type: 'category'
        },

        legend: {
            enabled: false
        },

        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                }
            }
        },

        series: [{
            name: 'Things',
            colorByPoint: true,
            data: [{
                name: 'Animals',
                y: 5,
                drilldown: 'animals'
            },{
                name: 'Food',
                y: 4,
                drilldown: 'food'
            }]
        }],
        drilldown: {
            series: [{
                id: 'food',
                name: 'Food',
                data: [{
                    name: 'Apple',
                    y: 1.5,
                    drilldown: 'apple'
                },
                    ['Banana', 1],
                    ['Peer', 0.5],
                    ['Pineapple', 1]
                ]
            }, {

                id: 'apple',
                data: [['1/6' ,1],
                      ['1/3' , 2],
                      ['1/2' , 3]]
            },{
                id: 'animals',
                name: 'Animals',
                data: [{
                    name: 'Cats',
                    y: 5,
                    drilldown: 'cats'
                }, ['Dogs', 2],
                    ['Cows', 1],
                    ['Sheep', 1],
                    ['Pigs', 1]
                ]
            }, {

                id: 'cats',
                data: [1, 2, 3]
            }]
        }
    })
});

thanks for posting this but is there any way if banana's doesn't have more pieces or drilldown then it would show there are no pieces ? need help — Muhammad Siddique, Jun 04 '18 at 12:28
the jsfiddle needs https in the script tags. [https://jsfiddle.net/n958sfgv/](https://jsfiddle.net/n958sfgv/) — csum, Feb 12 '21 at 18:36

score 2 · Answer 3 · answered Jul 04 '16 at 11:11

<script src="js/jquery-2.0.2.min.js"></script>  
    <script src="js/highcharts.js"></script>  
    <script src="js/drilldown.js"></script>  
    <script>  
        var chartSeriesData = [];
  var chartDrilldownData = [];

$.ajax({
type: 'GET',
url: 'abc.json',
success: function(data) {


    var agentJson = data;

    for (var i = 0;i <agentJson.countryInfo.length; i++)

        {

        var series_name = agentJson.countryInfo[i].name;
        var drill_id = agentJson.countryInfo[i].drilldown;
        var series_data = agentJson.countryInfo[i].y;

        var drill_data = agentJson.countryInfo[i].data;


              chartSeriesData.push({
                 name: series_name,
                 y: parseFloat(series_data),
                 drilldown : drill_id                                     
              }); 


         chartDrilldownData.push({
             data : drill_data,
             id: drill_id,
             name: series_name,

         });


        }

    /// END FOR LOOP


    $('#countryInfo').highcharts({

        credits: {
            enabled: false
        },

        chart: {
            type: 'pie',
            backgroundColor:'rgba(255, 255, 255, 0.1)'
        },
        title: {
            text: 'Human Resources'
        },

        subtitle: {
            text: ''
        },
        plotOptions: {
            series: {
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '{point.name}: {point.y:.1f}%',
                    style: {
                        color: '#000',
                        fontWeight: 'bold',
                        fontSize: '12px',
                        textShadow: "0px #ffffff"

                     }
                }
            }
        },

        tooltip: {
            headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
            pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
        },
        series: [{
            name: 'Country',
            colorByPoint: true,
            data: chartSeriesData
        }],
        drilldown: {
             series: chartDrilldownData
            }
    });



}


});


    </script>  


and your json file look likes:

{"countryInfo":[{"name":"Firefox","y":4,"drilldown":"Firefox","data":[["desktop",1]]},{"name":"Chrome","y":176,"drilldown":"Chrome","data":[["desktop",1],["desktop",18]]}]}

score 1 · Answer 4 · answered Jun 08 '17 at 13:49

Here is an example that preserves the names on the axis. (Drilldown works on "Animals" > "Mammals")

Drilldown options looks like this:

drilldown: {
  series: [{
    id: 'animals',
    data: [{
        name: 'Mammals',
        y: 4,
        drilldown: 'mammals'
      },
      ['Reptiles', 2],
      ['Vertebrates', 1]
    ]
  }, {
    id: 'mammals',
    data: [['Cats', 3], ['Dogs', 2], ['Platypus', 1]]
  },
  ...

http://jsfiddle.net/vcsqnr2z/

sshet · Answer 5 · 2014-04-18T11:54:13.793

0

You have to write a custom code for mutilple drill downs, We can achieve this by storing Data series in each columns ( first charts ) and passing this series to next graph and so on

edited Apr 18 '14 at 11:54

answered Apr 18 '14 at 11:46

sshet

1,152
1
6
15

Alisson Diel · Answer 6 · 2017-02-17T12:58:57.980

this.EixoX = ["Jun/2016","Jul/2016","Ago/2016","Set/2016","Out/2016","Nov/2016","Dez/2016"];
 this.EixoY = "Reais";
 this.Class = "DivGraficoLinhaDoTempo";
 this.Titulo = "Média de Vendas por Equipe";
 this.Subtitulo;
 this.ValoresBarras =[{
    name:"ECLEIA",
    data: [30000, 32000, 54000, 50000, 54000, 50000], //JAN, FEV, MAR, ABR, MAY, JUN
    vendedores: [{name:"ECLEIAv1",data:[32000,40005,40005,27002,20002,70001]},{name:"ECLEIAv2",data:[30000,55000,45000,22000,32000,33001]}]
    },{
    name:"JOANA",
    data: [43000, 12000, 34000, 4000, 30004, 4000],
    vendedores: [{name:"JOANAv1",data:[72000,55005,70005,90002,70002,50001]},{name:"JOANAv2",data:[22000,50005,40005,40002,30002,66001]}]
    },{
    name:"GABRIELE",
    data: [22000, 22000, 34000, 20004, 30004, 4000],
    vendedores: [{name:"GABRIELEv1",data:[11000,30005,60005,40002,30002,30001],vendedores: [{name:"GABRIELEv1SUB1",data:[11000,30005,60005,40002,30002,30001]},{name:"GABRIELEv1SUB2",data:[60000,50005,40005,24502,55502,70001]}]},{name:"GABRIELEv2",data:[60000,50005,40005,24502,55502,70001]}]
    },{
    name:"FRANCISCO",
    data: [54000, 12000, 30004, 4000, 30004, 4000],
    vendedores: [{name:"FRANCISCOv1",data:[52000,60005,20005,11002,66002,40001]},{name:"FRANCISCOv2",data:[50000,56005,40005,25002,30002,38001]}]
    }];
        
 this.ValoresLinha = [{
    name:"MÉDIA",
    data: [54000, 12000, 30004, 4000, 30004, 4000]
   
    }];
 //ATRIBUTOS AUXILIARES

 this.nivel;
 this.indexmes;
 this.indexvendedor;
 this.drilldownniveis;
 var drilldownTitle = "Equipe de ";


 ///UserCodeRegionStart:[User Functions] (do not remove this comment.)
 var _this = this;
 //var vetorNomesX = [];

  var colors = Highcharts.getOptions().colors;

  $(function () {
   Highcharts.Tick.prototype.drillable = function () {}; //REMOVE LINKS DOS LABELS DO EIXO X(mes), pois cada mes possui "n" vendedores
   var options = {
    type:"column",
    chart: {
     renderTo: "container",
     events: {
        drilldown: function(e) {
         //console.log(e.point);
          chart.setTitle({ text: drilldownTitle + e.point.name });
        },
        drillup: function(e) {
          chart.setTitle({ text: _this.Titulo });
        }
      }
    },
    title: {
     text: _this.Titulo
    },
    subtitle: {
     text: _this.Subtitulo
    },
    xAxis: {
     categories: _this.EixoX
    },
    yAxis: {
     labels: {
      formatter: function () {
       return Highcharts.numberFormat(this.value,0);
      }
     },
     title: {
      text: _this.EixoY
     }
    },
    plotOptions: {

     column: {
           cursor: "pointer",
           point: {
             events: {
               click: function (e) {

                _this.indexmes = e.point.x;
                _this.indexvendedor = e.point.series.columnIndex;
                                //LÓGICA PARA AVANÇO DE NIVEIS
                if(_this.drilldownniveis){
                 chart.setTitle({ text: drilldownTitle + _this.drilldownniveis[_this.indexvendedor].name });
                 _this.drilldownniveis = _this.drilldownniveis[_this.indexvendedor].drilldown;
                 }else{
                  chart.setTitle({ text: drilldownTitle + options.series[_this.indexvendedor].name });
                  _this.drilldownniveis = options.series[_this.indexvendedor].data[_this.indexmes].drilldown;

                 if(options.series[_this.indexvendedor].data[_this.indexmes].drilldown.length<=0){ //SE drilldown = 0 mesma coisa que não ter (undefined), então seto null!
                 _this.drilldownniveis = null;
                 }
               }
                //setChart de acordo com novas variaveis
                  if (_this.drilldownniveis) { // drill down
                     if(_this.drilldownniveis.length<=0){
                      _this.drilldownniveis = options.series;
                     }

                     var media = new Array(0,0,0,0,0,0,0); //ZERA ARRAY PARA PODER SOMAR VALORES

                     for(var x=0;x<_this.EixoX.length;x++){
                     $(_this.drilldownniveis).each(function(index, el) {
                      media[x] += el.data[x];
                      });
                     }
                     for(var x=0;x<_this.EixoX.length;x++){
                       media[x] = media[x]/_this.drilldownniveis.length;
                     }

                      _this.drilldownniveis.push({
                        "name": "MÉDIA",
                        "type":"spline",
                        "data": media
                      });

                    setChart(null, _this.EixoX, _this.drilldownniveis, null, 1);
                    _this.drilldownniveis.pop();

                 } else if(!_this.drilldownniveis){ // restore
                  chart.setTitle({ text: _this.Titulo });
                  setChart(null, _this.EixoX,options.series, null,2);
                 }else if(options.series){ // NÃO VAI ENTRAR AQUI
                  setChart(null, _this.EixoX,options.series, null,2);
                 }
               }
             }
           }
         }
    },
    legend: {
     layout: "horizontal",
     align: "right",
     verticalAlign: "bottom",
     floating: false,
     borderWidth: 0
    },
    credits: {
     enabled: false
    },
    series: []
    // drilldown: {
    //  series: drill_down_data
    // }
   };

   function setChart(name, categories, series, color, tipo) {

    if(series.length<=0){

    }else{

                   chart.xAxis[0].setCategories(categories);
                   while (chart.series.length > 0) {
                       chart.series[0].remove(true);
                   }
            for (var i = 0; i < series.length; i++) {
            var tipocolumn="column";
            var marcador=[];

            if(i==series.length-1 ){
             tipocolumn="spline";
             marcador= {
              lineWidth: 2,
              symbol: "circle",
              lineColor: Highcharts.getOptions().colors[3],
              fillColor: "white"
             };
            }
           // chart.setTitle({ text: _this.Titulo });
                       chart.addSeries({
               type: tipocolumn,
              marker: marcador,
                           name: series[i].name,
                           data: series[i].data,
               drilldown: series[i].drilldown,
                           color: colors[i]
                       });
                   }
          }

               }

//INICIALIZAÇÃO DAS SERIES DO Highcharts
$(_this.ValoresBarras).each(function(index, el) {
 var drilldownseries =[];

 var series = {
  name: el.name,
  type: "column",
  data: []
    };
   for(var count=0;count<_this.EixoX.length;count++){

    series.data.push({
      "name": el.name,
      "y": el.data[count],
      "colors": colors[index],
      "drilldown": drilldownseries
    });
   }

    $(el.vendedores).each(function(index2, vendedor) {
     drilldownseries.push({
           "name" : vendedor.name,
           "data"  : vendedor.data,
       "drilldown": vendedor.vendedores
       });
    });

 options.series.push(series);
});

$(_this.ValoresLinha).each(function(index, el) {
  var series = {
   type: "spline",
   name: "",
   data: [],
   marker: {
    lineWidth: 2,
    lineColor: Highcharts.getOptions().colors[3],
    fillColor: "white",
   }
  };
  series.name = el.name;
  series.data = el.data;
  options.series.push(series);
 });



   var chart = new Highcharts.Chart(options);
   /*$("#" + obj).highcharts({
   });*/
  });

 ///UserCodeRegionEnd: (do not remove this comment.):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto">

</div>

I Create a multi drilldown with multi levels, if anybody needs:

[http://jsfiddle.net/alissondiel/vNfWk/253/][1]

Drilldown multiple levels Highchart

6 Answers6

Linked