How to open multiple level drilldown in highcharts programatically? - highcharts

Question

I have this code for my chart
angular.module('myModule', []).service("CompOffLeaveService", function ($http) {
this.getdata = function () {
return $http({
method: "post",
url: "/Dashboard/GetCompOffLeaveReport",
params: [{ YearID: $("#YearIn option:selected").text() }],
dataType: "json"
});
};
}).controller('myController', function (CompOffLeaveService) {
GetAlldata();
function GetAlldata() {
var getCompOffLeaveData = CompOffLeaveService.getdata();
getCompOffLeaveData.then(function (NoOfLeaves) {
var myData = new Array();
for (var j = 0; j < NoOfLeaves.data.TeamNames.length; j++) {
debugger;
if (NoOfLeaves.data.TeamNames[j] != null) {
myData[j] = [
NoOfLeaves.data.TeamNames[j],
NoOfLeaves.data.TeamWiseCompOffLeaves[j]
];
}
else { break; }
}
var mySeries = [];
for (var i = 0; i < myData.length; i++) {
mySeries.push({ name: myData[i][0], y: myData[i][1], drilldown: true });
}
Highcharts.chart('container', {
chart: {
type: 'column'
},
credits: {
enabled: false
},
title: {
text: 'Comp Off Leave Report' + ' ' + $("#YearIn option:selected").text()
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Total CompOffLeave Recorded'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y}COL'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y} COL</b> in total<br/>',
},
series: [{
name: 'Team',
colorByPoint: true,
data: mySeries
}],
drilldown: {
series: []
}
});
}, function () {
alert('Error in getting records');
});
} $("#btnLoad").click(function (event) {
GetAlldata();
});
$("#btnBack").click(function (event) {
window.location.href = "home";
});
$(function () {
$("#draggable").draggable({ axis: "y", containment: "#parent", scroll: false, revert: true });
$("#resizable").resizable();
});
});
it is working perfectly well and gives me this output
what I want is to open a drilldown on any column click which will be having all months of the year e.g:
and on further drilldown I want this.e.g:
I can pass the data then..but drilldown is not getting open.