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).highchar         


        

Answer 1

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]
            }]
        }
    })
});

Answer 2

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/

Answer 3

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

Answer 4

It's possible, just add all drilldown series, then create connection between point and drilldown. See: http://jsfiddle.net/6LXVQ/2/

    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]
        }]
    }

Answer 5

<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]]}]}

Answer 6

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]