Reputation: 14442
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.
Upvotes: 0
Views: 230
Answers (2)
Reputation: 45079
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
Upvotes: 1
Reputation: 8954
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);
Upvotes: 0
Related Questions
- HighCharts Drill Down multiple series , how to get drill down on second item on drill down?
- Manually drilldown highcharts
- Highcharts drilldown display issue
- Highcharts multiple series drilldown to multiple series
- Multiple series in Highcharts with multiple drilldowns
- Highcharts stacked drilldown with n-levels
- Enable Drilldown in highchart without modifying the series
- Change chart type with drilldown series
- HighChart dynamic drill down
- Highcharts 3.08 drilldown with multiple parent series