Highchart IRREGULAR Spline with drilldown - cannot get drilldown functional - highcharts

Question

I have been pulling my hair out trying to get this highcharts irregular spline with drilldown and couldnt get the drilldown to work. I am new to highcharts and I think it may have to do with my syntax. I have referenced the API and tried a few methods with no luck.
Problem: I wanted to get a irregular spline to show counts of fruits by month. The drilldown would then show counts for types of fruits (apples and oranges). I am able to show the counts of fruits but the drilldown is not working.
The codes is below and also here: http://jsfiddle.net/bu2002/352a0zvr/2/
THanks so much everyone!!!
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'spline'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'count'
},
min: 0
},
series: [{
name: 'Fruits',
data: [
[Date.UTC(2014, 7, 19),12],
[Date.UTC(2014, 8, 19),5],
[Date.UTC(2014, 9, 19),18]
],
drilldown: 'fruits'
},
{
name: 'Animals',
data: [
[Date.UTC(2014, 7, 29),15],
[Date.UTC(2014, 8, 11),11],
[Date.UTC(2014, 9, 22),38]
],
drilldown: 'animals'
}
],//end series
drilldown: {
series: [{
id: 'animals',
data: [[Date.UTC(2014, 7, 29),15],
[Date.UTC(2014, 8, 11),11],
[Date.UTC(2014, 9, 22),38]],
},
{
id: 'fruits',
data: [
[Date.UTC(2014, 7, 29),15],
[Date.UTC(2014, 8, 11),11],
[Date.UTC(2014, 9, 22),38]
],
}
]
}//end drilldown
};//and options
var chart = new Highcharts.Chart(options);
});

Answer 1

The issue is now that you are providing a drilldown.id on the series. You need to do it per point. For example:
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}],
It looks to me like you want to have any drilldown on a point in "Fruits" to link to the same drilldown series. This is doable:
series: [{
name: 'Fruits',
data: [{
x: Date.UTC(2014, 7, 19),
y: 12,
drilldown: 'fruits'
}, {
x: Date.UTC(2014, 8, 19),
y: 5,
drilldown: 'fruits'
}, {
x: Date.UTC(2014, 9, 19),
y: 18,
drilldown: 'fruits'
}]
},
See update fiddle.

Answer 2

But here also U dont get 2 splines after clicking on fruits, u just get one.
Is there any way to get that as i have the same issue
fiddle https://jsfiddle.net/surya_swami/zx9dy3uj/40/
drilldown: { series: [{id:"z1",name: "Region-1",
data: [{ name : "July",y: 10},
{ name : "Aug",y: 21},
{ name : "Sept",y: 15}]
},
{id:"z1",name: "Region-2",
data: [{ name : "July",y: 12},
{ name : "Aug",y: 9},
{ name : "Sept",y: 25}]
},
{ id:'z2',name:'Region-3',
data : [{name:'July',y:23},
{name:'Aug',y:41},
{name:'Sept',y:31}]
},
{ id:'z2',name:'Region-4',
data : [{name:'July',y:33},
{name:'Aug',y:23},
{name:'Sept',y:12}]
},
{ id:'z2',name:'Region-5',
data : [{name:'July',y:31},
{name:'Aug',y:39},
{name:'Sept',y:19}]
}
]
}