How to use drilldown upto level 3 with different charts on each level in highcharts?

Question

I'm trying to have different chart on each level using HighCharts.

For example-

1. Level-1 contains Bar graph.
2. Level-2 contains Pie graph.
3. Level-3 contains Table representation.

Below is my code snippet :

// Create the chart
$('#container').highcharts({
    chart: {
        type: 'pie'  // Mentioned only pie.Need different graph on individual level.
    },
    title: {
        text: 'Basic drilldown'
    },
    xAxis: {
        type: 'category'
    },
    plotOptions: {
        series: {
            borderWidth: 1,
            dataLabels: {
                enabled: true,
            }
        }
    },
    series: [{
        id: 'toplevel',
        name: 'Animals',
        data: [
            {name: 'Cats', y: 4, drilldown: 'level1'}, //Level-1
            {name: 'Dogs', y: 2},
            {name: 'Cows', y: 1},
            {name: 'Sheep',y: 2},
            {name: 'Pigs', y: 1}
        ]
    }],
    drilldown: {
        series: [ { 
            id:'level1',
            name: 'Level 1',
            data: [
                {name: 'Trees', y: 1},
                {name: 'Plants', y: 2},
                {name: 'Grass', y: 3},
                {name: 'Deeper Level-2', y: 4, drilldown: 'level2'} //Level-2
            ] 
        },{                
            id:'level2',
            name: 'Level 2',
            data: [
                {name: 'Green', y:1},
                {name: 'Red', y:2},
                {name: 'Blue', y:3},
                {name: 'Deeper Level-3', y: 4, drilldown: 'level3'} //Level-3
            ] 
        },{
            id: 'level3',
            name: 'Level 3',
            data: [
                {name:'Violet', y:1},
                {name:'Red',y:2},
                {name:'Yellow', y:3}
            ]
        }]
    }
})

I'm expecting that, while click on each level;Data is to be appeared with different chart on each individual level.

Above code is giving me data in same chart type on slice click which is supposed to be in different chart type.

Answer 1

To change each individual level chart type you should use series.type like this:

drilldown: {
    series: [ { 
        id:'level1',
        name: 'Level 1',
        type: 'bar',
       //^^^^^^^^^^^
        data: [
            {name: 'Trees', y: 1},
            {name: 'Plants', y: 2},
            {name: 'Grass', y: 3},
            {name: 'Deeper Level-2', y: 4, drilldown: 'level2'} //Level-2
        ] 
    },{                
        id:'level2',
        name: 'Level 2',
        type: 'pie',
      //^^^^^^^^^^^^
        ...
    }]
}  

since you want to drill to table at last level and highcharts does not support such thing you should create a custom drill to table:

1. define a method to create custom table when chart drills to level-3

   var createTable = function(data) {
     $("#container").hide();
     // remove the existing table
     $('#here_table .table').remove();
   
     // create a table object
     var table = $('<div class="table"><a href="#" class="back" onclick="tableBack()">back</a><table></table></div>').addClass('chart-table');
   
     // iterate the series object, create rows and columnts
     $.each(data, function( index, value ) {
       var row = $('<tr></tr>').addClass('chart-row');
       var col1 = $('<td></td>').text(value.name).appendTo(row);
       var col2 = $('<td></td>').text(value.y).appendTo(row);
   
       // mark the row of the clicked sector
   
       table.append(row);
     });
   } 
   

2. add point click event handler for level-2 points,call createTable method and pass the level-3 data to createTable:

   {                
       id:'level2',
       name: 'Level 2',
       type: 'pie',
       point: {
               events: {
                   click: function () {
                       console.log(this);
                       if(this.name == "Deeper Level-3"){
                          var data = [
                            {name:'Violet', y:1},
                            {name:'Red',y:2},
                            {name:'Yellow', y:3}
                          ];
                          createTable(data);
                       }
   
                   }
               }
           },
       data: [
           {name: 'Green', y:1},
           {name: 'Red', y:2},
           {name: 'Blue', y:3},
           {name: 'Deeper Level-3', y: 4} //Level-3
       ] 
   }
   

3. and finally add an event handler for table back to get back where you were:

   tableBack = function(){
      $("#container").show();
      // remove the existing table
      $('#here_table .table').remove();
   }
   

Working Fiddle of what I have done

hope that helps

Answer 2

You just need set type of the data series. see a jsfiddle

        series: [{
            name: 'IE distribution',
            id: 'IE distribution',
            type: 'bar',
            data: [
                ['asia', 24.13],
                ['europe', 17.2],
                ['africa', 8.11]
            ]
        }