Highcharts stacked drilldown with n-levels
I am trying to make a column stacked chart along with drilldown but highcharts API doesnt support it as of now it seems. Have done a bit but its not working properly. http://jsfiddle.net/souranil/T6ryr/.
Highcharts.setOptions({
lang: {
FullScreenButtonTitle: "View Larger Chart"
}
});
$(function () {
var chart;
$(document).ready(function () {
var colors = Highcharts.getOptions().colors,
categories = ['Book1', 'Book2', 'Book3', 'Book4', 'Book5'],
name = 'AUM',
data = [{
y: 6.06,
color: '#B7C726',
drilldown: {
categories: ['Book1', 'Book2', 'Book3', 'Book4', 'Book5'],
series: [{
name: 'Page4',
data: [6.06, 7.90, 11.40],
color: '#74489D'
}, {
name: 'Page3',
data: [5.73, 7.26, 11.03],
color: '#B7C726'
}, {
name: 'Page2',
data: [5.71, 6.98, 10.73, 11.92],
color: '#7CCCBF'
}, {
name: 'Page1',
data: [5.58, 6.70, 10.31, 11.66, 0],
color: '#F3901D'
}]
} // drilldown
}, {
y: 7.9, //MA 10
color: '#B7C726',
drilldown: {
categories: ['FY09/10', 'FY10/11', 'FY11/12', 'FY12/13', 'FY13/14'],
series: [{
name: 'Page4',
data: [6.06, 7.90, 11.40],
color: '#74489D'
}, {
name: 'Page3',
data: [5.73, 7.26, 11.03],
color: '#B7C726'
}, {
name: 'Page2',
data: [5.71, 6.98, 10.73, 11.92],
color: '#7CCCBF'
}, {
name: 'Page1',
data: [5.58, 6.70, 10.31, 11.66, 0],
color: '#F3901D'
}]
} // drilldown
}, {
y: 11.4, //MA 11
color: '#B7C726',
drilldown: {
categories: ['FY09/10', 'FY10/11', 'FY11/12', 'FY12/13', 'FY13/14'],
series: [{
name: 'Page4',
data: [6.06, 7.90, 11.40],
color: '#74489D'
}, {
name: 'Page3',
data: [5.73, 7.26, 11.03],
color: '#B7C726'
}, {
name: 'Page2',
data: [5.71, 6.98, 10.73, 11.92],
color: '#7CCCBF'
}, {
name: 'Page1',
data: [5.58, 6.70, 10.31, 11.66, 0],
color: '#F3901D'
}]
} // drilldown
}, {
y: 11.92, //MA 12
color: '#B7C726',
drilldown: {
categories: ['FY09/10', 'FY10/11', 'FY11/12', 'FY12/13', 'FY13/14'],
series: [{
name: 'Page4',
data: [6.06, 7.90, 11.40],
color: '#74489D'
}, {
name: 'Page3',
data: [5.73, 7.26, 11.03],
color: '#B7C726'
}, {
name: 'Page2',
data: [5.71, 6.98, 10.73, 11.92],
color: '#7CCCBF'
}, {
name: 'Page1',
data: [5.58, 6.70, 10.31, 11.66, 0],
color: '#F3901D'
}]
} // drilldown
}, {
y: 10, //MA 13
color: '#B7C726',
drilldown: {
categories: ['FY09/10', 'FY10/11', 'FY11/12', 'FY12/13', 'FY13/14'],
series: [{
name: 'Page4',
data: [6.06, 7.90, 11.40],
color: '#74489D'
}, {
name: 'Page3',
data: [5.73, 7.26, 11.03],
color: '#B7C726'
}, {
name: 'Page2',
data: [5.71, 6.98, 10.73, 11.92],
color: '#7CCCBF'
}, {
name: 'Page1',
data: [5.58, 6.70, 10.31, 11.66, 0],
color: '#F3901D'
}]
} // drilldown
}];
data2 = [{
y: 6.85, //OA09
color: '#636466',
drilldown: {
categories: ['FY09/10', 'FY10/11', 'FY11/12', 'FY12/13', 'FY13/14'],
series: [{
name: 'Page4',
data: [6.85, 7.52, 8.45],
color: '#74489D'
}, {
name: 'Page3',
data: [6.50, 7.16, 8.11, 0],
color: '#B7C726'
}, {
name: 'Page2',
data: [6.35, 7.01, 8.04, 8.52, 0],
color: '#7CCCBF'
}, {
name: '1st quarter',
data: [6.25, 6.85, 4.61, 8.52, 0],
color: '#F3901D'
}]
} // drilldown
}, {
y: 7.52, //OA10
color: '#636466',
drilldown: {
categories: ['FY09/10', 'FY10/11', 'FY11/12', 'FY12/13', 'FY13/14'],
series: [{
name: 'Page4',
data: [6.85, 7.52, 8.45],
color: '#74489D'
}, {
name: 'Page3',
data: [6.50, 7.16, 8.11, 0],
color: '#B7C726'
}, {
name: 'Page2',
data: [6.35, 7.01, 8.04, 8.52, 0],
color: '#7CCCBF'
}, {
name: 'Page1',
data: [6.25, 6.85, 4.61, 8.52, 0],
color: '#F3901D'
}]
} // drilldown
}, {
y: 8.45, //OA11
color: '#636466',
drilldown: {
categories: ['FY09/10', 'FY10/11', 'FY11/12', 'FY12/13', 'FY13/14'],
series: [{
name: 'Page4',
data: [6.85, 7.52, 8.45],
color: '#74489D'
}, {
name: 'Page3',
data: [6.50, 7.16, 8.11, 0],
color: '#B7C726'
}, {
name: 'Page2',
data: [6.35, 7.01, 8.04, 8.52, 0],
color: '#7CCCBF'
}, {
name: 'Page1',
data: [6.25, 6.85, 4.61, 8.52, 0],
color: '#F3901D'
}]
} // drilldown
}, {
y: 8.57, //OA12
color: '#636466',
drilldown: {
categories: ['FY09/10', 'FY10/11', 'FY11/12', 'FY12/13', 'FY13/14'],
series: [{
name: 'Page4',
data: [6.85, 7.52, 8.45],
color: '#74489D'
}, {
name: 'Page3',
data: [6.50, 7.16, 8.11, 0],
color: '#B7C726'
}, {
name: 'Page2',
data: [6.35, 7.01, 8.04, 8.52, 0],
color: '#7CCCBF'
}, {
name: 'Page1',
data: [6.25, 6.85, 4.61, 8.52, 0],
color: '#F3901D'
}]
} // drilldown
}, {
y: 33, //OA13
color: '#636466',
drilldown: {
categories: ['FY09/10', 'FY10/11', 'FY11/12', 'FY12/13', 'FY13/14'],
series: [{
name: 'Page4',
data: [6.85, 7.52, 8.45],
color: '#74489D'
}, {
name: 'Page3',
data: [6.50, 7.16, 8.11, 0],
color: '#B7C726'
}, {
name: 'Page2',
data: [6.35, 7.01, 8.04, 8.52, 0],
color: '#7CCCBF'
}, {
name: 'Page1',
data: [6.25, 6.85, 4.61, 8.52, 0],
color: '#F3901D'
}]
} // drilldown
}];
function setChart(name, categories, data, color) {
var len = chart.series.length;
chart.yAxis[0].options.stackLabels.enabled = true;
chart.xAxis[0].setCategories(categories);
for (var i = 0; i < len; i++) {
console.log(chart.series.length);
chart.series[0].remove();
}
//console.log('a');
if (data.series) {
for (var i = 0; i < data.series.length; i++) {
chart.addSeries({
name: data.series[i].name,
data: data.series[i].data,
color: data.series[i].color || 'white',
stacking: 'norma'
});
}
} else {
chart.addSeries({
name: name,
data: data
//color: 'white'
}, {
name: name,
data: data2
//color: 'white'
});
}
}
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Highcharts Nested drilldown'
},
subtitle: {
text: 'Lets see how good highcharts is ...'
},
xAxis: {
categories: categories
},
yAxis: {
title: {
text: 'Volume',
style: {
color: '#006633'
}
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
},
formatter: function () {
return this.y;
//return Highcharts.numberFormat(this.total, 2, '.')
/*var i = 0;
if (this.total < 0) {
return '';
} else {
var total = 0;
$.each(this.axis.chart.series, function(j, serie) {
total += serie.options.data[i];
});
i++;
return Highcharts.numberFormat(total, 2, ',');
}*/
} // formatter
},
labels: {
formatter: function () {
return this.value;
},
style: {
color: '#006633'
}
}
},
legend: {
enabled: false
},
plotOptions: {
column: {
cursor: 'pointer',
point: {
events: {
click: function () {
var drilldown = this.drilldown;
if (drilldown) { // drill down
chart.setTitle({
text: this.series.name
})
//chart.yAxis[0].options.tickInterval = 0.5;
chart.yAxis[0].options.stackLabels.enabled = false;
setChart(null, drilldown.categories, drilldown);
} else { // restore
window.location.reload(true);
}
}
}
},
dataLabels: {
enabled: true,
color: 'white',
style: {
fontWeight: 'normal'
},
formatter: function () {
return this.y + ' ';
},
formatter: function () {
return Highcharts.numberFormat(this.y, 2, '.')
}
}
}
},
tooltip: {
formatter: function () {
/*var i = 0;
if (this.total < 0) {
return '';
} else {
var total = 0;
$.each(this.axis.chart.series, function(j, serie) {
total += serie.options.data[i];
});
i++;
//return stotal;
}*/
var series = this.series.chart.series,
total = 0,
x = this.point.x,
i;
for (i = 0; i < series.length; i++)
total += series[i].data[x].y
//return this.series.name+': '+this.y+'<br/>'+
// 'total: '+ Highcharts.numberFormat(total, 2, '.');
var point = this.point,
s = this.series.name + ' : ' + this.x + ':<b>' + this.y + '($b)</b><br/>';
//s += 'total: '+ Highcharts.numberFormat(total, 2, '.');
if (point.drilldown) {
s += 'Click to view chapters';
} else {
//s += 'Click to return to yearly figures';
s += 'Total: ' + Highcharts.numberFormat(total, 2, '.');
}
if (this.series.type == 'arearange') {
s = this.series.name + ' : ' + this.x + ':<b>' + '20-25($b)</b><br/>';
}
return this.series.name;
}
},
series: [{
type: 'column',
name: 'Chapter1',
data: data,
color: '#B7C726'
}, {
type: 'column',
name: 'Chapter2',
data: data2,
color: '#636466'
}],
exporting: {
enabled: true
},
});
var allseries = chart.series;
});
});
I need to handle stuff differently on stack element clicks and xAxis label clicks.
- On clicking xAxis labels it should drilldown to a column chart with the next level data ( if more drilldown is not present else a stacked column chart again ).
- If a stack element is clicked it should drilldown to a normal column chart containing the nested data.
Has anyone done it yet?
Answer
You can use drilldown feature from Highcharts.
Right now only grouped and stacked column are having problem. Simple stacking or grouping works perfectly fine, see:
Connected bug report