Search code examples
javascriptjquerychartshighchartsdrilldown

Drilldown With Linked Series


I am working on displaying drill-able data sets for multiple areas. I want to show both series at the same time so that a comparison can be made between the two without having to toggle through each one. What I want to have happen is that when a category is drill-able for it to then drill down for each series shown. If series 1 has no drill data that is fine as long as series 2 does. I have seen methods that are using data like:

var data1 = [{
                y: 1674,
                color: colors[0],
                drilldown: {
                    name: '1011 Actual',
                    categories: ['BS', 'B', 'IT', 'C'],
                    data: [3, 32, 54, 50],

                    color: colors[0],

                    name1: '1011 Target',
                    data1: [0, 31, 50, 60],
                    color1: colors[1]
                }
            }];

Where each point has its drilldown defined in its data point assignment. The method to do linked drilldown here was found at this jsfiddle.

We do not have this data setup. What we have is more along the lines of:

series: [{
            name: 'Cape Coral-Fort Myers, FL Metropolitan Statistical Area',
            type: 'bar',
            data: [{
                name: 'Total nonfarm',
                y: 224200
            }, {
                name: 'Total private',
                y: 185100
            }, {
                name: 'Goods-producing',
                y: 22400
                drilldown: '900000000'
            }....

And then we define our drilldown series as a list of all the items that are not "top":

drilldown: {
            series: [{
                id: '400000000',
                name: 'Trade, transportation, and utilities',
                data: [{
                    name: 'Wholesale Trade',
                    y: 6900
                }...

I am not sure how to have the 2 (to N) series linked on a category drilldown. Here is my demo for what I currently have.


Solution

  • I'm not sure if I understand problem correctly (you have long discussion with Rob), but in short: you want to drilldown from one bar/category to two (or more) another series? In drilldown.js plugin it's not supported. Take a look: http://jsfiddle.net/2rz6N/ - after click on 2 you will get only one series with two points. There are plans to support multi-series drilldown. but for now there are only plans.

    So you have only two options:

    • change data format to fit first solution you provided
    • hack drilldown.js plugin and add that functionality