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>


Related Query