Add multiple series with drilldown to multiple series in Vaadin - vaadin

Question

I want to do this in Vaadin.
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Highcharts multi-series drilldown'
},
subtitle: {
text: 'Click columns to drill down to single series. Click categories to drill down both.'
},
xAxis: {
type: 'category'
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: '2010',
data: [{
name: 'Republican',
y: 5,
drilldown: 'republican-2010'
}, {
name: 'Democrats',
y: 2,
drilldown: 'democrats-2010'
}, {
name: 'Other',
y: 4,
drilldown: 'other-2010'
}]
}, {
name: '2014',
data: [{
name: 'Republican',
y: 4,
drilldown: 'republican-2014'
}, {
name: 'Democrats',
y: 4,
drilldown: 'democrats-2014'
}, {
name: 'Other',
y: 4,
drilldown: 'other-2014'
}]
}],
drilldown: {
series: [{
id: 'republican-2010',
data: [
['East', 4],
['West', 2],
['North', 1],
['South', 4]
]
}, {
id: 'democrats-2010',
data: [
['East', 6],
['West', 2],
['North', 2],
['South', 4]
]
}, {
id: 'other-2010',
data: [
['East', 2],
['West', 7],
['North', 3],
['South', 2]
]
}, {
id: 'republican-2014',
data: [
['East', 2],
['West', 4],
['North', 1],
['South', 7]
]
}, {
id: 'democrats-2014',
data: [
['East', 4],
['West', 2],
['North', 5],
['South', 3]
]
}, {
id: 'other-2014',
data: [
['East', 7],
['West', 8],
['North', 2],
['South', 2]
]
}]
}
});
});
I am using the asynchronous Drilldown to generate the series:
chart.setDrilldownCallback(new DrilldownCallback() {
private static final long serialVersionUID = 6274915467357292767L;
#Override
public DataSeries handleDrilldown(DrilldownEvent event) {
i++;
return buildDataSeries(event.getItem());
}
});
As you can see handleDrilldown(DrilldownEvent event) returns one DataSeries and I need a list.
Is there any way to add multiple series with drilldown in Vaadin?

Answer 1

I'm not sure why you need a list of DataSeries. You should have enough information in the DrilldownEvent object to know which bar (republican/democrat/other;2010/2014) was selected. Knowing that, you can construct a single DataSeries which contains all four East, West, North, South values. As can be seen the link you submitted, each drilldown is contained within one series "Series 3".
String year = event.getSeries().getName() // 2010 or 2014
String party = event.getDataSeriesItem().getName() // Republican, Democrat or Other
Knowing that you can construct you DataSeries:
DataSeries series = new DataSeries();
series.add(new DataSeriesItem("East", a);
series.add(new DataSeriesItem("West", b);
series.add(new DataSeriesItem("North", c);
series.add(new DataSeriesItem("South", d);
// a, b, c, d depending on the year and party variables above