Highcharts drilldown from a series - highcharts

Question

I have a chart that displays series data by year.
eg 1011, 1112, 1213, 1415, and shows an actual and target for each year.
If the user clicks on a column, the chart drills down into that dataset, however I'd like to be able to show Actual and Target next to each other, rather than a single column...
JSFiddle: http://jsfiddle.net/MuydK/
Any help appreciated, am stumped on this as tried several methods.
I believe I understand how to set up the data into a series set rather than just a dataset, but don't know what changes I need to make to SetChart etc...
Also the Series titles disappear once I've drilled in and out once, any ideas...?
Many Thanks for you help.
var chart;
$(document).ready(function () {
var colors = Highcharts.getOptions().colors,
categories1 = ['1011', '1112', '1213', '1415'],
name1 = 'Actual',
data1 = [ ...

Answer 1

I updated your code with simple data, I think this is what you want,This is just a demo you can update code according to you.
JSFiddle
Here is code:
$(function () {
var chart;
$(document).ready(function () {
var colors = Highcharts.getOptions().colors,
categories1 = ['1011', '1112', '1213', '1415'],
name1 = 'Actual',
data1 = [
{
y: 1674,
color: colors[0],
drilldown: {
name: '1011 Actual',
categories: ['BS', 'B', 'IT', 'C'],
data: [3, 32, 54, 50],
color: colors[0],
name1: '1011 Target',
data1: [0, 31, 50, 60],
color1:colors[1]
}
}
]; var colors = Highcharts.getOptions().colors,
categories2 = ['1011', '1112', '1213', '1415'],
name2 = 'Target',
data2 = [
{
y: 1633,
color: colors[1],
drilldown: {
name: '1011 Actual',
categories: ['BS', 'B', 'IT', 'C'],
data: [3, 32, 54, 50],
color: colors[0],
name1: '1011 Target',
data1: [0, 31, 50, 60],
color1:colors[1]
}
}
]; function setChart(name, categories, data, color) {
console.log(name, categories, data, color);
chart.xAxis[0].setCategories(categories);
while (chart.series.length > 0) {
chart.series[0].remove(true);
}
for (var i = 0; i < data.length; i++) {
chart.addSeries({
name: name[i],
data: data[i],
color: color[i]
});
}
}
chart = new Highcharts.Chart({
chart: {
renderTo: 'con1',
type: 'column'
},
title: {
text: 'Learner Responsive 16-18'
},
subtitle: {
text: 'Click the columns to view breakdown by department. Click again to view by Academic Year.'
},
xAxis: {
categories: categories1
, labels: {rotation:-90, align:'right'}
},
yAxis: {
title: {
text: 'Learner Responsive 16-18'
}
},
plotOptions: {
column: {
cursor: 'pointer',
point: {
events: {
click: function () {
var drilldown = this.drilldown;
if (drilldown) { // drill down
setChart([drilldown.name,drilldown.name1], drilldown.categories, [drilldown.data, drilldown.data1], [drilldown.color,drilldown.color1]);
} else { // restore
setChart(name, categories1, [data1, data2], 'white');
}
}
}
},
dataLabels: {
enabled: true,
color: colors[0],
style: {
fontWeight: 'bold'
},
formatter: function () {
return this.y; // +'%';
}
}
}
},
tooltip: {
formatter: function () {
var point = this.point,
series = point.series,
s = 'Learner Responsive 16-18' + '<br/>' + this.x + ' ' + series.name + ' is <b>' + this.y + '</b><br/>';
if (point.drilldown) {
s += 'Click to view <b>' + point.category + ' ' + series.name + ' </b>' + ' by department';
} else {
s += 'Click to return to view by academic year.';
}
return s;
}
},
series: [{
name: name1,
data: data1,
color: colors[0]
},{
name: name2,
data: data2,
color: colors[1]
}],
exporting: {
enabled: false
}
},
function (chart) {
console.log(chart);
});
});
});