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
4731521
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
4731521
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
4731521
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
4731521
asked Nov 19 at 16:15
emihir0
4731521
asked Nov 19 at 16:15
emihir0
4731521
asked Nov 19 at 16:15
emihir0
4731521
asked Nov 19 at 16:15
emihir0
4731521
4731521
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,636129
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 |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
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
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,636129
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,636129
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,636129
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,636129
answered Nov 19 at 17:44
ppotaczek
3,636129
answered Nov 19 at 17:44
ppotaczek
3,636129
answered Nov 19 at 17:44
ppotaczek
3,636129
3,636129
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 |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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
