drilldown on column range - highcharts

Question

I'm wondering if somebody has tried to add drilldowns to a column range chart.
This is an example of what I'm trying to do: http://jsfiddle.net/pawelk79/8jmV6/
$(function () {
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
title: {
text: 'History'
},
subtitle: {
text: ''
},
xAxis: {
categories: ['Example 1','Example 2', 'Example 3'],
},
yAxis: {
type: 'datetime',
min: new Date('2007,01,01').getTime(),
max: new Date('2014,05,01').getTime(),
title: {
text: 'Year'
}
},
tooltip: true,
plotOptions: {
columnrange: {
dataLabels: {
enabled: false,
formatter: function () {
return this.y ;
}
}
}
},
legend: {
enabled:false
},
series: [{
name: 'Year',
data:
[
[Date.UTC(2007, 2, 2), Date.UTC(2009, 5, 10)],
[Date.UTC(2009, 6, 10), Date.UTC(2011, 9, 10)],
[Date.UTC(2011, 9, 25), Date.UTC(2014, 5, 1)]
]
}
]
});
});
Any advises welcome.
Thanks
P

Answer 1

This does actually work, you just need to be particularly careful about the formatting of both the main series and drilldown series:
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
xAxis: {
type: 'category'
},
yAxis: {
type: 'datetime'
},
legend: {
enabled: false
},
series: [{
name: 'Yearly',
colorByPoint: true,
data: [{
name: 'Yearly1',
low: Date.UTC(2007, 2, 2),
high: Date.UTC(2009, 5, 10),
drilldown: 'monthly1'
}, {
name: 'Yearly2',
low: Date.UTC(2009, 6, 10),
high: Date.UTC(2011, 9, 10),
drilldown: 'monthly2'
}, {
name: 'Yearly3',
low: Date.UTC(2011, 9, 25),
high: Date.UTC(2014, 5, 1),
drilldown: 'monthly3'
}]
}],
drilldown: {
series: [{
id: 'monthly1',
data: [{
name: 'example1',
low: Date.UTC(2009, 6, 10),
high: Date.UTC(2009, 6, 11)
}, {
name: 'example2',
low: Date.UTC(2009, 6, 10),
high: Date.UTC(2009, 6, 15)
}]
}, {
id: 'monthly2',
data: [{
name: 'example1',
low: Date.UTC(2010, 5, 10),
high: Date.UTC(2010, 6, 11)
}, {
name: 'example2',
low: Date.UTC(2010, 8, 10),
high: Date.UTC(2010, 8, 15)
}]
}, {
id: 'monthly3',
data: [{
name: 'example1',
low: Date.UTC(2012, 9, 10),
high: Date.UTC(2012, 9, 11)
}, {
name: 'example2',
low: Date.UTC(2012, 11, 10),
high: Date.UTC(2012, 11, 15)
}]
}]
}
});
Here is a working fiddle:
http://jsfiddle.net/ycn75svr
Formatting the dataLabels further would make sense (make the dates readable and return the actual series/drilldown names propwerly) but I haven't included that in this fiddle.