Line chart series drilldown to another linechart series

Question

http://jsfiddle.net/4kp2bdus/3/

I've been trying to get this highcharts example to work where if I click on each of the lines, you can then drill down into it's own new line chart series.

So each one of the lines is a competency and I want to be able to drill down do each competency's Behavior that has relatively the same type of data.

I tried having Foundation behaviors as one of the drilldowns but it did not work.

Thanks for you help!

// Internationalization


$(function () {
    $('#container').highcharts({
        title: {
            text: 'Competency Trend',
            x: -20 //center
        },
        subtitle: {
            text: '',
            x: -20
        },
        xAxis: {
            categories: ['Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']
        },
        yAxis: {
            title: {
                text: 'Max Score: 4'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: ''
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        drilldown: {
        		series: []
        },
        series: [{
            name: 'Foundation',
            data: [2.0, 2.3, 2.5, 2.9, 3.0, 2.6, 2.8, 2.65, 2.7, 2.67, 2.9, 3.0],
            drilldown: 'foundationBehaviors'
        }, {
            name: 'Build Value',
            data: [2.9, 2.9, 2.9, 2.875, 2.8, 3.0, 2.9, 2.8, 3.1, 3.2, 3.30, 3.29]
        }, {
            name: 'Discover',
            data: [3.0, 3.1, 3.3, 3.1, 3.4, 3.42, 3.5, 3.55, 3.59, 3.61, 3.66, 3.71]
        }, {
            name: 'Advance',
            data: [3.3, 3.4, 3.45, 3.6, 3.62, 3.65, 3.69, 3.71, 3.8, 3.89, 3.76, 3.8]
        }, {
            name: 'Engage',
            data: [3.5, 3.51, 3.45, 3.7, 4.0, 3.76, 3.8, 3.95, 4.0, 4.0, 3.9, 3.86]
        }, {
            id: 'foundationBehaviors',
            name: 'Foundation Behaviors',
            categories: ['Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
            data: [3.5, 3.51, 3.45, 3.7, 4.0, 3.76, 3.8, 3.95, 4.0, 4.0, 3.9, 3.86]
        }],
        
    });
});

Answer 1

Drilldown is associated with a point not with a series. And, the series that you drill down to is defined in the drilldown member, not in the normal series member.

http://api.highcharts.com/highcharts/drilldown

 $('#container').highcharts({
    title: {
      text: 'Competency Trend',
      x: -20 //center
    },
    subtitle: {
      text: '',
      x: -20
    },
    xAxis: {
      categories: ['Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']
    },
    yAxis: {
      title: {
        text: 'Max Score: 4'
      },
      plotLines: [{
        value: 0,
        width: 1,
        color: '#808080'
      }]
    },
    tooltip: {
      valueSuffix: ''
    },
    legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle',
      borderWidth: 0
    },
    drilldown: {
      series: [{
        id: 'foundationBehaviors',
        name: 'Foundation Behaviors',
        categories: ['Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
        data: [3.5, 3.51, 3.45, 3.7, 4.0, 3.76, 3.8, 3.95, 4.0, 4.0, 3.9, 3.86]
      }]
    },
    series: [{
      name: 'Foundation',
      data: [{y:2.0, drilldown: 'foundationBehaviors'}, 2.3, 2.5, 2.9, 3.0, 2.6, 2.8, 2.65, 2.7, 2.67, 2.9, 3.0]
    }, {
      name: 'Build Value',
      data: [2.9, 2.9, 2.9, 2.875, 2.8, 3.0, 2.9, 2.8, 3.1, 3.2, 3.30, 3.29]
    }, {
      name: 'Discover',
      data: [3.0, 3.1, 3.3, 3.1, 3.4, 3.42, 3.5, 3.55, 3.59, 3.61, 3.66, 3.71]
    }, {
      name: 'Advance',
      data: [3.3, 3.4, 3.45, 3.6, 3.62, 3.65, 3.69, 3.71, 3.8, 3.89, 3.76, 3.8]
    }, {
      name: 'Engage',
      data: [3.5, 3.51, 3.45, 3.7, 4.0, 3.76, 3.8, 3.95, 4.0, 4.0, 3.9, 3.86]
    }],

  });

http://jsfiddle.net/4kp2bdus/4/