I have a HighCharts chart with two series plotted. Each data point can be drilled down to show a sub-plot: http://jsfiddle.net/9phfzewj/21/
The problem I have is that when I click on an x-axis label I am taken to a sub-plot with two series shown. The x-axis labels of this sub-plot only correspond to one of the series being shown, and the x-axis title and chart title also only refer to one of the series. I would like to have the x-axis labels for each series shown (perhaps there could be a secondary x-axis?), and also be able to correctly change the titles.
Is anyone able to help me to improve this and fix the problems?
Many thanks,
David
$(function () {
var chart;
var defaultTitle = "CT doses";
var protocolNames = ['Abdomen','Chest','Sinus'];
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
events: {
drilldown: function(e) {
parentSeriesIndex = e.point.series.index;
parentSeriesName = e.point.series.name;
var this_series_title = parentSeriesName.indexOf('DLP') != -1 ? ' DLP' : ' CTDIvol';
chart.setTitle({ text: e.point.name + this_series_title}, { text: '(n = ' + e.point.x +')' });
chart.yAxis[0].setTitle({text:'Number'});
chart.xAxis[0].setTitle({text:parentSeriesName.indexOf('DLP') != -1 ? 'DLP range (mGy.cm)' : 'CTDIvol range (mGy)'});
chart.xAxis[0].setCategories([], true);
chart.tooltip.options.formatter = function(args) {
return this.y.toFixed(0);
};
chart.yAxis[1].update({
labels: {
enabled: false
},
title: {
text: null
}
});
},
drillup: function(e) {
chart.setTitle({ text: defaultTitle }, { text: '' });
chart.yAxis[0].setTitle({text:'DLP (mGy.cm)'});
chart.yAxis[1].setTitle({text:'CTDIvol (mGy)'});
chart.xAxis[0].setTitle({text:''});
chart.xAxis[0].setCategories(protocolNames, true);
chart.xAxis[0].update({labels:{rotation:90}});
chart.yAxis[1].update({
labels: {
enabled: true
},
title: {
text: 'CTDIvol (mGy)'
}
});
}
}
},
title: {
text: 'CT doses'
},
xAxis: {
title: {
useHTML: true
},
categories: protocolNames,
labels: {
useHTML: true,
rotation:90
}
},
yAxis: [{
min: 0,
title: {
text: 'DLP (mGy.cm)'
}
}, {
title: {
text: 'CTDIvol (mGy)'
},
opposite: true
}],
legend: {
align: 'center',
verticalAlign: 'top',
floating: true,
borderWidth: 0,
x: 0,
y: 40
},
tooltip: {
shared: true
},
plotOptions: {
column: {
borderWidth: 0
}
},
series: [{
name: 'DLP',
data: [{
name: 'Abdomen',
y: 150,
drilldown: 'AbdomenDLP'
}, {
name: 'Chest',
y: 73,
drilldown: 'ChestDLP'
}, {
name: 'Sinus',
y: 20,
drilldown: 'SinusDLP'
}],
tooltip: {
valueSuffix: ' mGy.cm'
}
}, {
name: 'CTDI',
data: [{
name: 'Abdomen',
y: 57.2,
drilldown: 'AbdomenCTDI'
}, {
name: 'Chest',
y: 25.8,
drilldown: 'ChestCTDI'
}, {
name: 'Sinus',
y: 43.4,
drilldown: 'SinusCTDI'
}],
tooltip: {
valueSuffix: ' mGy'
},
yAxis: 1
}],
drilldown: {
series: [{
name: 'Abdomen',
id: 'AbdomenDLP',
data: [
['up to 150', 4],
['up to 200', 2],
['up to 250', 1],
['up to 300', 2],
['up to 350', 1]
]
}, {
name: 'Chest',
id: 'ChestDLP',
data: [
['up to 100', 40],
['up to 110', 21],
['up to 120', 24],
['up to 130', 32],
['up to 140', 64]
]
}, {
name: 'Sinus',
id: 'SinusDLP',
data: [
['up to 130', 4],
['up to 140', 2],
['up to 150', 6],
['up to 160', 7],
['up to 170', 9]
]
}, {
name: 'Abdomen',
id: 'AbdomenCTDI',
data: [
['up to 20', 4],
['up to 22', 9],
['up to 24', 12],
['up to 26', 8],
['up to 28', 2]
]
}, {
name: 'Chest',
id: 'ChestCTDI',
data: [
['up to 10', 4],
['up to 12', 9],
['up to 14', 12],
['up to 16', 8],
['up to 18', 2]
]
}, {
name: 'Sinus',
id: 'SinusCTDI',
data: [
['up to 14', 4],
['up to 16', 9],
['up to 18', 12],
['up to 20', 8],
['up to 22', 2]
]
}]
}
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://highslide-software.github.io/export-csv/export-csv.js"></script>
<script src="http://github.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>This is now fixed, thanks to the help offered from Pawel Fus. A working jsfiddle is here:
http://jsfiddle.net/9phfzewj/27/
If you click on an x-axis label this drills down to a plot that has two x-axes. Both of these are now labelled correctly, and the legend of the drilled-down plot is also correct.
Regards,
David
$(function () {
var chart;
var defaultTitle = "CT doses";
var protocolNames = ['Abdomen','Chest','Sinus'];
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
events: {
drilldown: function(e) {
parentSeriesIndex = e.point.series.index;
parentSeriesName = e.point.series.name;
chart.setTitle({ text:''});
chart.yAxis[0].setTitle({text:'Number'});
if (parentSeriesName.indexOf('DLP') != -1) {
chart.xAxis[0].setTitle({text:'DLP range (mGy.cm)'});
}
if (parentSeriesName.indexOf('CTDI') != -1) {
chart.xAxis[1].setTitle({text:'CTDI range (mGy)'});
}
chart.xAxis[0].setCategories([], true);
chart.tooltip.options.formatter = function(args) {
if (this.series.name.indexOf('DLP') != -1) {
returnValue = this.y.toFixed(0) + ', DLP series' + ', ' + this.x;
} else {
returnValue = this.y.toFixed(0) + ', CTDI series' + ', ' + this.x;
}
return returnValue;
};
chart.yAxis[1].update({
labels: {
enabled: false
},
title: {
text: null
}
});
},
drillup: function(e) {
chart.setTitle({ text: defaultTitle }, { text: '' });
chart.yAxis[0].setTitle({text:'DLP (mGy.cm)'});
chart.yAxis[1].setTitle({text:'CTDIvol (mGy)'});
chart.xAxis[0].setTitle({text:''});
chart.xAxis[1].setTitle({text:''});
chart.xAxis[0].setCategories(protocolNames, true);
chart.xAxis[0].update({labels:{rotation:90}});
chart.yAxis[1].update({
labels: {
enabled: true
},
title: {
text: 'CTDIvol (mGy)'
}
});
}
}
},
title: {
text: 'CT doses'
},
xAxis: [{
title: {
useHTML: true
},
type: "category",
//categories: protocolNames,
labels: {
useHTML: true,
rotation:90
}
}, {
title: {
useHTML: true
},
type: "category",
opposite: true,
//categories: protocolNames,
labels: {
useHTML: true,
rotation:90
}
}],
yAxis: [{
min: 0,
title: {
text: 'DLP (mGy.cm)'
}
}, {
title: {
text: 'CTDIvol (mGy)'
},
opposite: true
}],
legend: {
align: 'center',
verticalAlign: 'top',
floating: true,
borderWidth: 0,
//x: -60,
y: 70
},
tooltip: {
//shared: true
},
plotOptions: {
column: {
borderWidth: 0
}
},
series: [{
name: 'DLP',
data: [{
name: 'Abdomen',
y: 150,
drilldown: 'AbdomenDLP'
}, {
name: 'Chest',
y: 73,
drilldown: 'ChestDLP'
}, {
name: 'Sinus',
y: 20,
drilldown: 'SinusDLP'
}],
tooltip: {
valueSuffix: ' mGy.cm'
}
}, {
name: 'CTDI',
data: [{
name: 'Abdomen',
y: 57.2,
drilldown: 'AbdomenCTDI'
}, {
name: 'Chest',
y: 25.8,
drilldown: 'ChestCTDI'
}, {
name: 'Sinus',
y: 43.4,
drilldown: 'SinusCTDI'
}],
tooltip: {
valueSuffix: ' mGy'
},
yAxis: 1
}],
drilldown: {
series: [{
name: 'Abdomen DLP',
id: 'AbdomenDLP',
data: [
['up to 150', 4],
['up to 200', 2],
['up to 250', 1],
['up to 300', 2],
['up to 350', 1]
]
}, {
name: 'Chest DLP',
id: 'ChestDLP',
data: [
['up to 100', 40],
['up to 110', 21],
['up to 120', 24],
['up to 130', 32],
['up to 140', 64]
]
}, {
name: 'Sinus DLP',
id: 'SinusDLP',
data: [
['up to 130', 4],
['up to 140', 2],
['up to 150', 6],
['up to 160', 7],
['up to 170', 9]
]
}, {
name: 'Abdomen CTDI',
id: 'AbdomenCTDI',
xAxis: 1,
data: [
['up to 20', 4],
['up to 22', 9],
['up to 24', 12],
['up to 26', 8],
['up to 28', 2]
]
}, {
name: 'Chest CTDI',
id: 'ChestCTDI',
xAxis: 1,
data: [
['up to 10', 4],
['up to 12', 9],
['up to 14', 12],
['up to 16', 8],
['up to 18', 2]
]
}, {
name: 'Sinus CTDI',
id: 'SinusCTDI',
xAxis: 1,
data: [
['up to 14', 4],
['up to 16', 9],
['up to 18', 12],
['up to 20', 8],
['up to 22', 2]
]
}]
}
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://highslide-software.github.io/export-csv/export-csv.js"></script>
<script src="http://github.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>