0

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.

Improve this question
4
  • Looks like you're going to have to write some custom parsing script to get the corresponding drill-downs for each series. This would involve some sort of looping currently to establish they have the same "name" etc. Then you would do as the other demo does and add those "series" that you have found to the chart. Commented Jul 22, 2014 at 13:27
  • There has to be a simpler way than re-factoring our code. I am not always going to have the same drill levels at any given series collection. I just need to link series 1 to series 2 on drill. Commented Jul 22, 2014 at 14:38
  • You don't have to refactor your code. You have to write a javascript function that parses your data-format to bind the 2-series together, Commented Jul 22, 2014 at 14:42
  • Yes, this is what my question is. How to bind them. Commented Jul 22, 2014 at 15:06

2 Answers 2

Reset to default
1

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
Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

If you look at my jsFiddle and you click on Government on the blue series and then go back up and click on Government on the red series. Notice that each drilldown is for that series only. What I want is that if I click on either the blue or red series the drill down contains both series but with their respective drilldown points. So, I want both series to be present (red/blue). It will be a combo of the individual click drills how it is now.
And this is not supported. It's possible to achieve that only by clicking on a label of category. I'm pretty sure that we have been talking about this somewhere in the past..?
Correct. The main issue I am facing is that I am given the data like this - in distinct "main" series and with the drilldown.series. We do not know how many possible drilldown children any one node would have before runtime. The series is built in a .NET wrapper and passed to me to plot. All of our data for the charts is generated at runtime from a DB back-end. We use no hard-coded data. This is the conundrum I am faced with - code re-use and standardizing inputs which leads to painting myself into a corner when the business rules change drastically.
Clicking on only the category link is fine. I don't care how the drilldown is triggered.
As I said, it's not supported. You can workaround this by overwriting Point.init and applying drilldown on your own. Take a look: jsfiddle.net/e9uJ2/3
|
0

Without doing all the work, here's a start: First off define your data 'out-of-line' rather than inline, then process the drilldown series first and make an associative array which we can use to populate the drilldown property of the series data.

This now formats the data into the same shape roughly as the other demo and you can start playing around with the listeners etc. Since your data doesn't always have a data from drilldown you would have to handle that somehow in anycase. Either by defining 0 data for drilldown and thus adding a drilldown property to every series data or checking on click and taking appropriate action.

Demo:http://jsfiddle.net/robschmuecker/e9uJ2/2/

deltonaData = [{
        name: 'Total nonfarm',
        y: 160300,
        supp: 0,
        priv: 0
    }, {
        name: 'Total private',
        y: 140000,
        supp: 0,
        priv: 0
    }, {
        name: 'Goods-producing',
        y: 17800,
        supp: 0,
        priv: 0
    }, {
        name: 'Service-providing',
        y: 142500,
        supp: 0,
        priv: 0
    }, {
        name: 'Private service-providing',
        y: 122200,
        supp: 0,
        priv: 0
    }, {
        name: 'Mining, Logging, and Construction',
        y: 8500,
        supp: 0,
        priv: 0
    }, {
        name: 'Manufacturing',
        y: 9300,
        supp: 0,
        priv: 0
    }, {
        name: 'Trade, transportation, and utilities',
        drilldown: '400000001',
        y: 30000,
        supp: 0,
        priv: 0
    }, {
        name: 'Information',
        y: 1800,
        supp: 0,
        priv: 0
    }, {
        name: 'Financial activities',
        y: 7700,
        supp: 0,
        priv: 0
    }, {
        name: 'Professional and business services',
        y: 18400,
        supp: 0,
        priv: 0
    }, {
        name: 'Education and health services',
        drilldown: '650000001',
        y: 32600,
        supp: 0,
        priv: 0
    }, {
        name: 'Leisure and hospitality',
        y: 24100,
        supp: 0,
        priv: 0
    }, {
        name: 'Other services',
        y: 7600,
        supp: 0,
        priv: 0
    }, {
        name: 'Government',
        drilldown: '900000001',
        y: 20300,
        supp: 0,
        priv: 0
    }];

    capeData = [{
        name: 'Total nonfarm',
        y: 224200,
        supp: 0,
        priv: 0
    }, {
        name: 'Total private',
        y: 185100,
        supp: 0,
        priv: 0
    }, {
        name: 'Goods-producing',
        y: 22400,
        supp: 0,
        priv: 0
    }, {
        name: 'Service-providing',
        y: 201800,
        supp: 0,
        priv: 0
    }, {
        name: 'Private service-providing',
        y: 162700,
        supp: 0,
        priv: 0
    }, {
        name: 'Mining, Logging, and Construction',
        y: 17400,
        supp: 0,
        priv: 0
    }, {
        name: 'Manufacturing',
        y: 5000,
        supp: 0,
        priv: 0
    }, {
        name: 'Trade, transportation, and utilities',
        drilldown: '400000000',
        y: 47000,
        supp: 0,
        priv: 0
    }, {
        name: 'Information',
        y: 3300,
        supp: 0,
        priv: 0
    }, {
        name: 'Financial activities',
        y: 11700,
        supp: 0,
        priv: 0
    }, {
        name: 'Professional and business services',
        y: 30600,
        supp: 0,
        priv: 0
    }, {
        name: 'Education and health services',
        drilldown: '650000000',
        y: 25500,
        supp: 0,
        priv: 0
    }, {
        name: 'Leisure and hospitality',
        y: 35400,
        supp: 0,
        priv: 0
    }, {
        name: 'Other services',
        y: 9200,
        supp: 0,
        priv: 0
    }, {
        name: 'Government',
        drilldown: '900000000',
        y: 39100,
        supp: 0,
        priv: 0
    }];

    drilldownSeries = [{
                id: '400000000',
                name: 'Trade, transportation, and utilities',
                showInLegend: false,
                yAxis: 0,
                tooltip: {
                    valueDecimals: 0
                },
                seriesHasSupp: false,
                chartLoc: 'chartMain',
                data: [{
                    name: 'Wholesale Trade',
                    y: 6900,
                    supp: 0,
                    priv: 0
                }, {
                    name: 'Retail trade',
                    y: 36000,
                    drilldown: '420000000',
                    supp: 0,
                    priv: 0
                }, {
                    name: 'Transportation and warehousing',
                    y: 4100,
                    supp: 0,
                    priv: 0
                }]
            }, {
                id: '420000000',
                name: 'Retail trade',
                showInLegend: false,
                yAxis: 0,
                tooltip: {
                    valueDecimals: 0
                },
                seriesHasSupp: false,
                chartLoc: 'chartMain',
                data: [{
                    name: 'Food and beverage stores',
                    y: 7200,
                    supp: 0,
                    priv: 0
                }, {
                    name: 'General merchandise stores',
                    y: 6200,
                    supp: 0,
                    priv: 0
                }]
            }, {
                id: '650000000',
                name: 'Education and health services',
                showInLegend: false,
                yAxis: 0,
                tooltip: {
                    valueDecimals: 0
                },
                seriesHasSupp: false,
                chartLoc: 'chartMain',
                data: [{
                    name: 'Hospitals',
                    y: 0.0,
                    supp: 0,
                    priv: 0
                }]
            }, {
                id: '900000000',
                name: 'Government',
                showInLegend: false,
                yAxis: 0,
                tooltip: {
                    valueDecimals: 0
                },
                seriesHasSupp: false,
                chartLoc: 'chartMain',
                data: [{
                    name: 'Federal',
                    y: 2500,
                    supp: 0,
                    priv: 0
                }, {
                    name: 'State government',
                    y: 4000,
                    supp: 0,
                    priv: 0
                }, {
                    name: 'Local government',
                    y: 32600,
                    supp: 0,
                    priv: 0
                }]
            }, {
                id: '400000001',
                name: 'Trade, transportation, and utilities',
                showInLegend: false,
                yAxis: 0,
                tooltip: {
                    valueDecimals: 0
                },
                seriesHasSupp: false,
                chartLoc: 'chartMain',
                data: [{
                    name: 'Wholesale Trade',
                    y: 4200,
                    supp: 0,
                    priv: 0
                }, {
                    name: 'Retail trade',
                    y: 23800,
                    drilldown: '420000001',
                    supp: 0,
                    priv: 0
                }, {
                    name: 'Transportation and warehousing',
                    y: 2000,
                    supp: 0,
                    priv: 0
                }]
            }, {
                id: '420000001',
                name: 'Retail trade',
                showInLegend: false,
                yAxis: 0,
                tooltip: {
                    valueDecimals: 0
                },
                seriesHasSupp: false,
                chartLoc: 'chartMain',
                data: [{
                    name: 'Food and beverage stores',
                    y: 5000,
                    supp: 0,
                    priv: 0
                }, {
                    name: 'General merchandise stores',
                    y: 4900,
                    supp: 0,
                    priv: 0
                }]
            }, {
                id: '650000001',
                name: 'Education and health services',
                showInLegend: false,
                yAxis: 0,
                tooltip: {
                    valueDecimals: 0
                },
                seriesHasSupp: false,
                chartLoc: 'chartMain',
                data: [{
                    name: 'Hospitals',
                    y: 7500,
                    supp: 0,
                    priv: 0
                }]
            }, {
                id: '900000001',
                name: 'Government',
                showInLegend: false,
                yAxis: 0,
                tooltip: {
                    valueDecimals: 0
                },
                seriesHasSupp: false,
                chartLoc: 'chartMain',
                data: [{
                    name: 'Federal',
                    y: 1100,
                    supp: 0,
                    priv: 0
                }, {
                    name: 'State government',
                    y: 2900,
                    supp: 0,
                    priv: 0
                }, {
                    name: 'Local government',
                    y: 16300,
                    supp: 0,
                    priv: 0
                }]
            }];

    // Get references for all the 
    drilldownSeriesAssoc = [];
    $.each(drilldownSeries, function(i, series){
     drilldownSeriesAssoc[series.id] = series;
    });
    console.log(drilldownSeriesAssoc);

    $.each(deltonaData, function(i, topic){
        if(topic.drilldown){
             topic.drilldown = drilldownSeriesAssoc[topic.drilldown];   
        }
    });
    console.log(deltonaData);

    $.each(capeData, function(i, topic){
        if(topic.drilldown){
             topic.drilldown = drilldownSeriesAssoc[topic.drilldown];   
        }
    });
    console.log(capeData);
Improve this answer

4 Comments

This binds the series into one overlap. The drilldown is now broken and that is the part that needs the binding (as well as the drillup). Knowing the overlap is all that drilldownSeriesAssoc gives. I already know the overlap. How to make the drilldown function use both series' drilldown?
I am so eternally glad that you have posted such an in-depth analysis of my answer. It certainly made you consider something surely?! How did you associate the overlap before other than some loose association?! Listen buddy I'm here to help! If you want more of my expertise I suggest you find me and pay for it!
I suppose my question could have been clearer - I need the binding on the drilldown. If I just set the new series to the child elements for the parents such that clicking on any parent gives any children in new "drill" the HC code actually "loses" its scope and I cannot drillup. As this is a help site I was not aware there could not be a back and forth. Apologies.
Right I get that but it's a question with little intrinsic value to anyone else but yourself since your data is in the obtuse format you are unwilling to change. This is a custom one-off which normally won't benefit any other. I have given and illustrated the beginning of what you needed to do to your data and then the rest is up to you based on the event listeners you highlighted in the first demo. We're not here to do your work for you!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.