score:4
Accepted answer
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>
Source: stackoverflow.com
Related Query
- Highcharts multiple column chart with drilldown, correct formatting of drilldown axes
- Highcharts Column chart with drilldown, remove hyperlink like formatting from x-axis labels
- Highcharts Grouped Column Chart with Multiple Groups?
- Highcharts column + line combination chart with multiple series. Issue aligning line over the column
- Highcharts - column chart with drilldown to waterfall
- Highcharts drilldown to pie chart - Clicking on axis label with multiple series causes pie charts to overlap
- Creating a drilldown chart with Highcharts that contain double(multiple) columns for each column (see example for better explanation)
- Highcharts column + line combination chart with multiple series
- Highcharts multiple column bar chart with "fill" effect
- Highcharts : Chart with drilldown how to obtain click event of drill up button
- Highcharts chart with 'datetime' xAxis - use categories on drilldown
- Need stacked column chart with multiple series
- Timeline chart with highcharts using x-range with multiple stacks
- Change chart type and redraw with multiple series in Highcharts
- HighCharts Data Structure - Multiple Independent Series, Stacked Column Chart
- How to Build a Column Chart in Highcharts with Data Entered Dynamically Within a CMS
- Drilldown for grouped column chart in highcharts
- Highcharts - Column chart with empty columns for date in x-axis
- How to use Highcharts React to create chart with multiple lines for same XAxis?
- In Highcharts drilldown charts, Custom Formatting of X-Axis label displays the label with underline even in the last level
- how to add new index Highcharts column drilldown chart
- Multiple pie-charts in the same chart with HighCharts
- passing formatting JavaScript code to HighCharts with JSON
- Highcharts column chart color by single color but with different brightness level as per respective column value
- Highcharts 3.08 drilldown with multiple parent series
- How to change color of bar in column chart with different level of percentage in highcharts
- How to set column width for columnRange chart with multiple series
- Multiple different chart types stacked, column type with y value as color
- Highcharts timeline chart with multiple axes
- Column chart with negative values and categories on xAxis in HighCharts
More Query from same tag
- Column behind column highchart
- Hightlight a Bar in HighCharts Bar chart
- Origin of a coordinate space
- Highchart doesn't display in IE7/8
- HighCharts : Note/Detail on a point
- plot area width and height in HighCharts
- HighCharts :(Solid Gauge) How to generate gauge dial with an arrow end.
- Highstock chart rangeSelector minute and day doesn't work
- Highcharts with Angular
- How can I get highcharts Donut chart to auto calculate percentages
- JS: how do I concatenate a variable into a API call with the dot syntax?
- How I can rotate a polar chart?
- Using HTML5 Custom Data Attributes to pass data from <div to javascript
- Highcharts date inaccuracy
- Highcharts stock control range when rangeSelector hidden
- Highcharts word cloud - Make a link to each word
- How to match columns height with spline in Highcharts
- Highcharts combine chart types
- Angular 7 - Highcharts title not changing
- How to import Proj4js to use with Highmaps?
- Action doesn't execute after ajax post
- Highchart - Connect nulls only when value is null
- highcharts.js: static ticks spaced equally apart
- Drilldown With Linked Series
- Column chart with categorised Y axis
- Highchart speedometer take input from csv
- Distinguish borders between line and column chart type
- Adding Series during componentWillReceiveProps does not work
- Highchart stacked area series is not showing correctly
- Highchart renderer path issue in IE8