Highcharts stacked column chart 3 level drilldown from JSON

Question

I have the following JSON:

mock_json = {
    "name":"Twin",
    "clus":[
     {
        "name": "Bob",
        "amount":
          {
            "low":2000,
            "sweet":700
          },
        "top_level": [
          {
            "name": "Andy",
            "amount":
              {
                "low":100,
                "sweet":80
              },
            "low_level": [
             {
                "name":"Dave",
                "amount":
                  {
                    "low":100,
                    "sweet":100
                  }
             }
            ]
          }
         ]
     }
    ]
}

And I want to have a highcharts stacked column chart like this https://semantia.com.au/articles/highcharts-drill-down-stacked-columns/ which drills down 3 level: First level -clus -> name with column split with amount-> low and high Second lever -top_level -> name with column split with amount -> low and hign Third Level: -low_level -> name with column split with amount -> low and hign

I'd like to accomplish this with jquery.

Answer 1

This data structure doesn't is quite messy, but I assumed that you cannot change it. Try to use this solution:

events: {
  drilldown: function(e) {
    console.log(e.point.name)
    if (!e.seriesOptions) {

      var chart = this,
        drilldowns = {
          'Bob': {
            name: 'Low',
            color: '#3150b4',
            data: [{
              name: data.clus[0]['top_level'][0].name,
              y: data.clus[0]['top_level'][0].amount.low,
              drilldown: true
            }]
          },
          'Andy': {
            name: 'Low',
            color: '#3150b4',
            data: [{
              name: data.clus[0]['top_level'][0]['low_level'][0].name,
              y: data.clus[0]['top_level'][0]['low_level'][0].amount.low,
              drilldown: true
            }]
          }
        },
        drilldowns2 = {
          'Bob': {
            name: 'Sweet',
            color: '#50B432',
            data: [{
              name: data.clus[0]['top_level'][0].name,
              y: data.clus[0]['top_level'][0].amount.sweet,
              drilldown: true
            }]
          },
          'Andy': {
            name: 'Sweet',
            color: '#50B432',
            data: [{
              name: data.clus[0]['top_level'][0]['low_level'][0].name,
              y: data.clus[0]['top_level'][0]['low_level'][0].amount.sweet,
              drilldown: true
            }]
          }
        },
        series = drilldowns[e.point.name],
        series2 = drilldowns2[e.point.name];
      chart.addSingleSeriesAsDrilldown(e.point, series);
      chart.addSingleSeriesAsDrilldown(e.point, series2);
      chart.applyDrilldown();

    }
  }
}

Demo: https://jsfiddle.net/BlackLabel/pk36xrb0/