Nested column chart with drilldown
up vote
0
down vote
favorite
I have a set of salaryies for employees. Each salary consist of a date and what contributed to it (bonuses, hourly wage, adjustments...).
I want to display the salaryies in a simple column highchart, where the series is split by month and hence salaries from a given month are stacked up. See this fiddle: http://jsfiddle.net/d1j7ongL/
What I want to have is a drilldown, such that when a month is clicked, all employees get displayed along with a breakdown of each salary by stack column (bonuses, hourly wage...), like this one:
http://jsfiddle.net/gpu2oL1t/
The problem is that I cannot get it to work. The closest I got was so group the data by category (ie. bonuses together, hourly salaries together etc):
http://jsfiddle.net/9tog4rkm/
The only problem is that I want the drill down data transposed (?). 'columns should be rows, rows should be columns' in a sense. I don't want to see the breakdown per category, but rather per employee.
Any advice?
highcharts
asked Nov 19 at 16:15
emihir0
4681521
add a comment |
up vote
0
down vote
favorite
I have a set of salaryies for employees. Each salary consist of a date and what contributed to it (bonuses, hourly wage, adjustments...).
I want to display the salaryies in a simple column highchart, where the series is split by month and hence salaries from a given month are stacked up. See this fiddle: http://jsfiddle.net/d1j7ongL/
What I want to have is a drilldown, such that when a month is clicked, all employees get displayed along with a breakdown of each salary by stack column (bonuses, hourly wage...), like this one:
http://jsfiddle.net/gpu2oL1t/
The problem is that I cannot get it to work. The closest I got was so group the data by category (ie. bonuses together, hourly salaries together etc):
http://jsfiddle.net/9tog4rkm/
The only problem is that I want the drill down data transposed (?). 'columns should be rows, rows should be columns' in a sense. I don't want to see the breakdown per category, but rather per employee.
Any advice?
highcharts
asked Nov 19 at 16:15
emihir0
4681521
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I have a set of salaryies for employees. Each salary consist of a date and what contributed to it (bonuses, hourly wage, adjustments...).
I want to display the salaryies in a simple column highchart, where the series is split by month and hence salaries from a given month are stacked up. See this fiddle: http://jsfiddle.net/d1j7ongL/
What I want to have is a drilldown, such that when a month is clicked, all employees get displayed along with a breakdown of each salary by stack column (bonuses, hourly wage...), like this one:
http://jsfiddle.net/gpu2oL1t/
The problem is that I cannot get it to work. The closest I got was so group the data by category (ie. bonuses together, hourly salaries together etc):
http://jsfiddle.net/9tog4rkm/
The only problem is that I want the drill down data transposed (?). 'columns should be rows, rows should be columns' in a sense. I don't want to see the breakdown per category, but rather per employee.
Any advice?
highcharts
asked Nov 19 at 16:15
emihir0
4681521
I have a set of salaryies for employees. Each salary consist of a date and what contributed to it (bonuses, hourly wage, adjustments...).
I want to display the salaryies in a simple column highchart, where the series is split by month and hence salaries from a given month are stacked up. See this fiddle: http://jsfiddle.net/d1j7ongL/
What I want to have is a drilldown, such that when a month is clicked, all employees get displayed along with a breakdown of each salary by stack column (bonuses, hourly wage...), like this one:
http://jsfiddle.net/gpu2oL1t/
The problem is that I cannot get it to work. The closest I got was so group the data by category (ie. bonuses together, hourly salaries together etc):
http://jsfiddle.net/9tog4rkm/
The only problem is that I want the drill down data transposed (?). 'columns should be rows, rows should be columns' in a sense. I don't want to see the breakdown per category, but rather per employee.
Any advice?
highcharts
highcharts
asked Nov 19 at 16:15
emihir0
4681521
asked Nov 19 at 16:15
emihir0
4681521
asked Nov 19 at 16:15
emihir0
4681521
asked Nov 19 at 16:15
emihir0
4681521
asked Nov 19 at 16:15
emihir0
4681521
4681521
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
1
down vote
accepted
You should create five drilldown series with names: 'Salary', 'Points', 'Adjustments', 'Bonuses', 'Foodstamps' and the names of employees as point names.
Example:
"drilldown": {
series: [{
name: 'Salary',
id: "employee-01",
data: [[
"employee-0",
328
], [
"employee-1",
52
]]
}, {
name: 'Points',
id: "employee-11",
data: [[
"employee-0",
-291
], [
"employee-1",
52
]]
}, {
name: 'Adjustments',
id: "employee-131",
data: [[
"employee-0",
-9
], [
"employee-1",
148
]]
}, {
name: 'Bonuses',
id: "employee-201",
data: [[
"employee-0",
0
], [
"employee-1",
0
]]
}, {
name: 'Foodstamps',
id: "employee-81",
data: [[
"employee-0",
0
], [
"employee-1",
0
]]
}]
}
Live demo: http://jsfiddle.net/BlackLabel/dmqfwejz/
answered Nov 19 at 17:44
ppotaczek
3,371129
That works, thanks! =)
– emihir0
Nov 20 at 10:22
Hello emihir0, I am glad that I could help, you can vote up and accept the answer: stackoverflow.com/help/someone-answers
– ppotaczek
Nov 20 at 10:25
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
You should create five drilldown series with names: 'Salary', 'Points', 'Adjustments', 'Bonuses', 'Foodstamps' and the names of employees as point names.
Example:
"drilldown": {
series: [{
name: 'Salary',
id: "employee-01",
data: [[
"employee-0",
328
], [
"employee-1",
52
]]
}, {
name: 'Points',
id: "employee-11",
data: [[
"employee-0",
-291
], [
"employee-1",
52
]]
}, {
name: 'Adjustments',
id: "employee-131",
data: [[
"employee-0",
-9
], [
"employee-1",
148
]]
}, {
name: 'Bonuses',
id: "employee-201",
data: [[
"employee-0",
0
], [
"employee-1",
0
]]
}, {
name: 'Foodstamps',
id: "employee-81",
data: [[
"employee-0",
0
], [
"employee-1",
0
]]
}]
}
Live demo: http://jsfiddle.net/BlackLabel/dmqfwejz/
answered Nov 19 at 17:44
ppotaczek
3,371129
That works, thanks! =)
– emihir0
Nov 20 at 10:22
Hello emihir0, I am glad that I could help, you can vote up and accept the answer: stackoverflow.com/help/someone-answers
– ppotaczek
Nov 20 at 10:25
add a comment |
up vote
1
down vote
accepted
You should create five drilldown series with names: 'Salary', 'Points', 'Adjustments', 'Bonuses', 'Foodstamps' and the names of employees as point names.
Example:
"drilldown": {
series: [{
name: 'Salary',
id: "employee-01",
data: [[
"employee-0",
328
], [
"employee-1",
52
]]
}, {
name: 'Points',
id: "employee-11",
data: [[
"employee-0",
-291
], [
"employee-1",
52
]]
}, {
name: 'Adjustments',
id: "employee-131",
data: [[
"employee-0",
-9
], [
"employee-1",
148
]]
}, {
name: 'Bonuses',
id: "employee-201",
data: [[
"employee-0",
0
], [
"employee-1",
0
]]
}, {
name: 'Foodstamps',
id: "employee-81",
data: [[
"employee-0",
0
], [
"employee-1",
0
]]
}]
}
Live demo: http://jsfiddle.net/BlackLabel/dmqfwejz/
answered Nov 19 at 17:44
ppotaczek
3,371129
That works, thanks! =)
– emihir0
Nov 20 at 10:22
Hello emihir0, I am glad that I could help, you can vote up and accept the answer: stackoverflow.com/help/someone-answers
– ppotaczek
Nov 20 at 10:25
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
You should create five drilldown series with names: 'Salary', 'Points', 'Adjustments', 'Bonuses', 'Foodstamps' and the names of employees as point names.
Example:
"drilldown": {
series: [{
name: 'Salary',
id: "employee-01",
data: [[
"employee-0",
328
], [
"employee-1",
52
]]
}, {
name: 'Points',
id: "employee-11",
data: [[
"employee-0",
-291
], [
"employee-1",
52
]]
}, {
name: 'Adjustments',
id: "employee-131",
data: [[
"employee-0",
-9
], [
"employee-1",
148
]]
}, {
name: 'Bonuses',
id: "employee-201",
data: [[
"employee-0",
0
], [
"employee-1",
0
]]
}, {
name: 'Foodstamps',
id: "employee-81",
data: [[
"employee-0",
0
], [
"employee-1",
0
]]
}]
}
Live demo: http://jsfiddle.net/BlackLabel/dmqfwejz/
answered Nov 19 at 17:44
ppotaczek
3,371129
You should create five drilldown series with names: 'Salary', 'Points', 'Adjustments', 'Bonuses', 'Foodstamps' and the names of employees as point names.
Example:
"drilldown": {
series: [{
name: 'Salary',
id: "employee-01",
data: [[
"employee-0",
328
], [
"employee-1",
52
]]
}, {
name: 'Points',
id: "employee-11",
data: [[
"employee-0",
-291
], [
"employee-1",
52
]]
}, {
name: 'Adjustments',
id: "employee-131",
data: [[
"employee-0",
-9
], [
"employee-1",
148
]]
}, {
name: 'Bonuses',
id: "employee-201",
data: [[
"employee-0",
0
], [
"employee-1",
0
]]
}, {
name: 'Foodstamps',
id: "employee-81",
data: [[
"employee-0",
0
], [
"employee-1",
0
]]
}]
}
Live demo: http://jsfiddle.net/BlackLabel/dmqfwejz/
answered Nov 19 at 17:44
ppotaczek
3,371129
answered Nov 19 at 17:44
ppotaczek
3,371129
answered Nov 19 at 17:44
ppotaczek
3,371129
answered Nov 19 at 17:44
ppotaczek
3,371129
3,371129
That works, thanks! =)
– emihir0
Nov 20 at 10:22
Hello emihir0, I am glad that I could help, you can vote up and accept the answer: stackoverflow.com/help/someone-answers
– ppotaczek
Nov 20 at 10:25
add a comment |
That works, thanks! =)
– emihir0
Nov 20 at 10:22
Hello emihir0, I am glad that I could help, you can vote up and accept the answer: stackoverflow.com/help/someone-answers
– ppotaczek
Nov 20 at 10:25
That works, thanks! =)
– emihir0
Nov 20 at 10:22
That works, thanks! =)
– emihir0
Nov 20 at 10:22
Hello emihir0, I am glad that I could help, you can vote up and accept the answer: stackoverflow.com/help/someone-answers
– ppotaczek
Nov 20 at 10:25
Hello emihir0, I am glad that I could help, you can vote up and accept the answer: stackoverflow.com/help/someone-answers
– ppotaczek
Nov 20 at 10:25
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53378702%2fnested-column-chart-with-drilldown%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
