I'm working on an Highchart pie. When I click on a slice I'd like to have a drilldown and to update my chart's title.
My drilldown is working fine. So is my method to update the title.
However when I try to update and to drilldown on the same click it doesn't work because the drilldown seems to occur before I can catch my clicked point value.
Here is a JSFiddle to illustrate my point.
Here's is my js code:
$(function () {
status_ = [['Ouverts', 896],['En cours',8],['Résolus - Clôs',0],['Ouverts', 3],['En cours',65],['Résolus - Clôs',0],['Ouverts', 427],['En cours',193],['Résolus - Clôs',0],['Ouverts', 48],['En cours',41],['Résolus - Clôs',0],['Ouverts', 2],['En cours',0],['Résolus - Clôs',0],['Ouverts', 38],['En cours',42],['Résolus - Clôs',0],['Ouverts', 244],['En cours',123],['Résolus - Clôs',0],['Ouverts', 5],['En cours',222],['Résolus - Clôs',0],['Ouverts', 441],['En cours',0],['Résolus - Clôs',0],['Ouverts', 259],['En cours',2],['Résolus - Clôs',0],['Ouverts', 16],['En cours',2],['Résolus - Clôs',0],['Ouverts', 6],['En cours',0],['Résolus - Clôs',0]];
var browserData = [];
var drillDownSerie = [];
for (var i = 0; i <18 ; i++) {
// add browser data
browserData.push({
name: i,
y: i
//if you uncomment here the drilldown works but not the title update
//,drilldown: i
});
drillDownSerie.push({
id: i,
data: [status_[3 * i],
status_[3 * i + 1],
status_[3 * i + 2]
]
});
}
$('#summary').highcharts({
chart: {
type: 'pie'
},
title: {
text: 'Répartition des 3000 derniers tickets'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y}'
},
point:{
events:{
click: function(){
UpdateTitle(this.y);
}
}
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b> of total<br/>'
},
credits : {enabled : false},
series: [{
name: 'Département',
colorByPoint: true,
data: browserData
}],
drilldown: {
series: drillDownSerie
}
});
var chart = $('#summary').highcharts();
function UpdateTitle(argument1) {
chart.setTitle({
text: argument1
})
}
})