Using dc.js on nested JSON to create bar chart
I am trying to create a bar chart for the roles by their count using dc.js and crossfilter. Need to deal with nested JSON.
Sample data set
[ { "user":"Mani"
"age":55,
"area":"NORTH",
"role": [
{
"roleId": 15,
"role": "Operator",
"at": "2018-10-30T07:53:10.433Z",
"createdAt": "2018-10-30T07:53:10.449Z"
},
{
"statusId": 16,
"status": "Supervisor",
"at": "2018-10-30T07:53:18.359Z",
"createdAt": "2018-10-30T07:53:18.359Z"
},
{
"statusId": 26,
"status": "Manager",
"at": "2018-10-30T13:01:50.296Z",
"createdAt": "2018-10-30T13:01:50.296Z"
}
]
}, {
"user":"Kandan"
"age":65,
"area":"SOUTH",
"role": [
{
"roleId": 15,
"role": "Operator",
"at": "2018-10-30T07:53:10.433Z",
"createdAt": "2018-10-30T07:53:10.449Z"
},
{
"statusId": 16,
"status": "Supervisor",
"at": "2018-10-30T07:53:18.359Z",
"createdAt": "2018-10-30T07:53:18.359Z"
}
]
}
]
I tried creating a chart by using values from the root level of each user but when I tried accessing the role key I am somehow able to use only one role not all the roles on other hand it returns the array to the dimension. The basic idea is to have role.role under x-axis and their count on the y-axis. How do I achieve this?
Sample output
javascript d3.js dc.js crossfilter
asked Nov 20 '18 at 14:37
ShahabazShahabaz
761211
add a comment |
I am trying to create a bar chart for the roles by their count using dc.js and crossfilter. Need to deal with nested JSON.
Sample data set
[ { "user":"Mani"
"age":55,
"area":"NORTH",
"role": [
{
"roleId": 15,
"role": "Operator",
"at": "2018-10-30T07:53:10.433Z",
"createdAt": "2018-10-30T07:53:10.449Z"
},
{
"statusId": 16,
"status": "Supervisor",
"at": "2018-10-30T07:53:18.359Z",
"createdAt": "2018-10-30T07:53:18.359Z"
},
{
"statusId": 26,
"status": "Manager",
"at": "2018-10-30T13:01:50.296Z",
"createdAt": "2018-10-30T13:01:50.296Z"
}
]
}, {
"user":"Kandan"
"age":65,
"area":"SOUTH",
"role": [
{
"roleId": 15,
"role": "Operator",
"at": "2018-10-30T07:53:10.433Z",
"createdAt": "2018-10-30T07:53:10.449Z"
},
{
"statusId": 16,
"status": "Supervisor",
"at": "2018-10-30T07:53:18.359Z",
"createdAt": "2018-10-30T07:53:18.359Z"
}
]
}
]
I tried creating a chart by using values from the root level of each user but when I tried accessing the role key I am somehow able to use only one role not all the roles on other hand it returns the array to the dimension. The basic idea is to have role.role under x-axis and their count on the y-axis. How do I achieve this?
Sample output
javascript d3.js dc.js crossfilter
asked Nov 20 '18 at 14:37
ShahabazShahabaz
761211
add a comment |
I am trying to create a bar chart for the roles by their count using dc.js and crossfilter. Need to deal with nested JSON.
Sample data set
[ { "user":"Mani"
"age":55,
"area":"NORTH",
"role": [
{
"roleId": 15,
"role": "Operator",
"at": "2018-10-30T07:53:10.433Z",
"createdAt": "2018-10-30T07:53:10.449Z"
},
{
"statusId": 16,
"status": "Supervisor",
"at": "2018-10-30T07:53:18.359Z",
"createdAt": "2018-10-30T07:53:18.359Z"
},
{
"statusId": 26,
"status": "Manager",
"at": "2018-10-30T13:01:50.296Z",
"createdAt": "2018-10-30T13:01:50.296Z"
}
]
}, {
"user":"Kandan"
"age":65,
"area":"SOUTH",
"role": [
{
"roleId": 15,
"role": "Operator",
"at": "2018-10-30T07:53:10.433Z",
"createdAt": "2018-10-30T07:53:10.449Z"
},
{
"statusId": 16,
"status": "Supervisor",
"at": "2018-10-30T07:53:18.359Z",
"createdAt": "2018-10-30T07:53:18.359Z"
}
]
}
]
I tried creating a chart by using values from the root level of each user but when I tried accessing the role key I am somehow able to use only one role not all the roles on other hand it returns the array to the dimension. The basic idea is to have role.role under x-axis and their count on the y-axis. How do I achieve this?
Sample output
javascript d3.js dc.js crossfilter
asked Nov 20 '18 at 14:37
ShahabazShahabaz
761211
I am trying to create a bar chart for the roles by their count using dc.js and crossfilter. Need to deal with nested JSON.
Sample data set
[ { "user":"Mani"
"age":55,
"area":"NORTH",
"role": [
{
"roleId": 15,
"role": "Operator",
"at": "2018-10-30T07:53:10.433Z",
"createdAt": "2018-10-30T07:53:10.449Z"
},
{
"statusId": 16,
"status": "Supervisor",
"at": "2018-10-30T07:53:18.359Z",
"createdAt": "2018-10-30T07:53:18.359Z"
},
{
"statusId": 26,
"status": "Manager",
"at": "2018-10-30T13:01:50.296Z",
"createdAt": "2018-10-30T13:01:50.296Z"
}
]
}, {
"user":"Kandan"
"age":65,
"area":"SOUTH",
"role": [
{
"roleId": 15,
"role": "Operator",
"at": "2018-10-30T07:53:10.433Z",
"createdAt": "2018-10-30T07:53:10.449Z"
},
{
"statusId": 16,
"status": "Supervisor",
"at": "2018-10-30T07:53:18.359Z",
"createdAt": "2018-10-30T07:53:18.359Z"
}
]
}
]
I tried creating a chart by using values from the root level of each user but when I tried accessing the role key I am somehow able to use only one role not all the roles on other hand it returns the array to the dimension. The basic idea is to have role.role under x-axis and their count on the y-axis. How do I achieve this?
Sample output
javascript d3.js dc.js crossfilter
javascript d3.js dc.js crossfilter
asked Nov 20 '18 at 14:37
ShahabazShahabaz
761211
asked Nov 20 '18 at 14:37
ShahabazShahabaz
761211
asked Nov 20 '18 at 14:37
ShahabazShahabaz
761211
asked Nov 20 '18 at 14:37
ShahabazShahabaz
761211
asked Nov 20 '18 at 14:37
ShahabazShahabaz
761211
761211
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Your problem isn't really the nested JSON; it's the fact that you have multiple roles for each user.
To fetch the roles for each user, you can use an accessor which returns an array of role names:
var roleDimension = cf.dimension(d => d.role.map(r => r.role), true);
The second parameter specifies that you want a "tag" or "array" dimension. This is a special mode where each row will be counted multiple times, once for each tag in the array which the dimension key accessor returns.
I see you want to use this for a bar chart, which is good - don't use this for any chart which implicitly adds up to 100%! Since the categories are not mutually exclusive, the behavior can be confusing even when you are careful not to imply 100%.
answered Nov 26 '18 at 12:41
GordonGordon
13.2k32161
Thank you so much I managed to create a bar chart. Now it turns out to be a problem with the filter. When the bars are selected it says point.map is not a function it filters certain chart but not all the charts on the screen.
– Shahabaz
Nov 27 '18 at 18:25
I don't think you need any more steps for the "tag dimension" and this bar chart. Sounds like you are running into a new, unrelated problem with your scatter plot definition now. (It helps to look at the source of the error.) Maybe the dimension/group for your scatter plot is not producing arrays of size 2 (points)? Remember, you only want to use the second argument tocrossfilter.dimensionwhen your key function returns multiple values - you probably don't want it for your scatter plot dimension.
– Gordon
Nov 28 '18 at 12:27
Feel free to open another question if you can't figure it out. I consider this question answered.
– Gordon
Nov 28 '18 at 12:29
Yes, sir. That issue got resolved, my code had some issue.
– Shahabaz
Nov 28 '18 at 14:34
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',
autoActivateHeartbeat: false,
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%2f53395393%2fusing-dc-js-on-nested-json-to-create-bar-chart%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
Your problem isn't really the nested JSON; it's the fact that you have multiple roles for each user.
To fetch the roles for each user, you can use an accessor which returns an array of role names:
var roleDimension = cf.dimension(d => d.role.map(r => r.role), true);
The second parameter specifies that you want a "tag" or "array" dimension. This is a special mode where each row will be counted multiple times, once for each tag in the array which the dimension key accessor returns.
I see you want to use this for a bar chart, which is good - don't use this for any chart which implicitly adds up to 100%! Since the categories are not mutually exclusive, the behavior can be confusing even when you are careful not to imply 100%.
answered Nov 26 '18 at 12:41
GordonGordon
13.2k32161
Thank you so much I managed to create a bar chart. Now it turns out to be a problem with the filter. When the bars are selected it says point.map is not a function it filters certain chart but not all the charts on the screen.
– Shahabaz
Nov 27 '18 at 18:25
I don't think you need any more steps for the "tag dimension" and this bar chart. Sounds like you are running into a new, unrelated problem with your scatter plot definition now. (It helps to look at the source of the error.) Maybe the dimension/group for your scatter plot is not producing arrays of size 2 (points)? Remember, you only want to use the second argument tocrossfilter.dimensionwhen your key function returns multiple values - you probably don't want it for your scatter plot dimension.
– Gordon
Nov 28 '18 at 12:27
Feel free to open another question if you can't figure it out. I consider this question answered.
– Gordon
Nov 28 '18 at 12:29
Yes, sir. That issue got resolved, my code had some issue.
– Shahabaz
Nov 28 '18 at 14:34
add a comment |
Your problem isn't really the nested JSON; it's the fact that you have multiple roles for each user.
To fetch the roles for each user, you can use an accessor which returns an array of role names:
var roleDimension = cf.dimension(d => d.role.map(r => r.role), true);
The second parameter specifies that you want a "tag" or "array" dimension. This is a special mode where each row will be counted multiple times, once for each tag in the array which the dimension key accessor returns.
I see you want to use this for a bar chart, which is good - don't use this for any chart which implicitly adds up to 100%! Since the categories are not mutually exclusive, the behavior can be confusing even when you are careful not to imply 100%.
answered Nov 26 '18 at 12:41
GordonGordon
13.2k32161
Thank you so much I managed to create a bar chart. Now it turns out to be a problem with the filter. When the bars are selected it says point.map is not a function it filters certain chart but not all the charts on the screen.
– Shahabaz
Nov 27 '18 at 18:25
I don't think you need any more steps for the "tag dimension" and this bar chart. Sounds like you are running into a new, unrelated problem with your scatter plot definition now. (It helps to look at the source of the error.) Maybe the dimension/group for your scatter plot is not producing arrays of size 2 (points)? Remember, you only want to use the second argument tocrossfilter.dimensionwhen your key function returns multiple values - you probably don't want it for your scatter plot dimension.
– Gordon
Nov 28 '18 at 12:27
Feel free to open another question if you can't figure it out. I consider this question answered.
– Gordon
Nov 28 '18 at 12:29
Yes, sir. That issue got resolved, my code had some issue.
– Shahabaz
Nov 28 '18 at 14:34
add a comment |
Your problem isn't really the nested JSON; it's the fact that you have multiple roles for each user.
To fetch the roles for each user, you can use an accessor which returns an array of role names:
var roleDimension = cf.dimension(d => d.role.map(r => r.role), true);
The second parameter specifies that you want a "tag" or "array" dimension. This is a special mode where each row will be counted multiple times, once for each tag in the array which the dimension key accessor returns.
I see you want to use this for a bar chart, which is good - don't use this for any chart which implicitly adds up to 100%! Since the categories are not mutually exclusive, the behavior can be confusing even when you are careful not to imply 100%.
answered Nov 26 '18 at 12:41
GordonGordon
13.2k32161
Your problem isn't really the nested JSON; it's the fact that you have multiple roles for each user.
To fetch the roles for each user, you can use an accessor which returns an array of role names:
var roleDimension = cf.dimension(d => d.role.map(r => r.role), true);
The second parameter specifies that you want a "tag" or "array" dimension. This is a special mode where each row will be counted multiple times, once for each tag in the array which the dimension key accessor returns.
I see you want to use this for a bar chart, which is good - don't use this for any chart which implicitly adds up to 100%! Since the categories are not mutually exclusive, the behavior can be confusing even when you are careful not to imply 100%.
answered Nov 26 '18 at 12:41
GordonGordon
13.2k32161
edited Nov 27 '18 at 16:30
answered Nov 26 '18 at 12:41
GordonGordon
13.2k32161
answered Nov 26 '18 at 12:41
GordonGordon
13.2k32161
answered Nov 26 '18 at 12:41
GordonGordon
13.2k32161
13.2k32161
Thank you so much I managed to create a bar chart. Now it turns out to be a problem with the filter. When the bars are selected it says point.map is not a function it filters certain chart but not all the charts on the screen.
– Shahabaz
Nov 27 '18 at 18:25
I don't think you need any more steps for the "tag dimension" and this bar chart. Sounds like you are running into a new, unrelated problem with your scatter plot definition now. (It helps to look at the source of the error.) Maybe the dimension/group for your scatter plot is not producing arrays of size 2 (points)? Remember, you only want to use the second argument tocrossfilter.dimensionwhen your key function returns multiple values - you probably don't want it for your scatter plot dimension.
– Gordon
Nov 28 '18 at 12:27
Feel free to open another question if you can't figure it out. I consider this question answered.
– Gordon
Nov 28 '18 at 12:29
Yes, sir. That issue got resolved, my code had some issue.
– Shahabaz
Nov 28 '18 at 14:34
add a comment |
Thank you so much I managed to create a bar chart. Now it turns out to be a problem with the filter. When the bars are selected it says point.map is not a function it filters certain chart but not all the charts on the screen.
– Shahabaz
Nov 27 '18 at 18:25
I don't think you need any more steps for the "tag dimension" and this bar chart. Sounds like you are running into a new, unrelated problem with your scatter plot definition now. (It helps to look at the source of the error.) Maybe the dimension/group for your scatter plot is not producing arrays of size 2 (points)? Remember, you only want to use the second argument tocrossfilter.dimensionwhen your key function returns multiple values - you probably don't want it for your scatter plot dimension.
– Gordon
Nov 28 '18 at 12:27
Feel free to open another question if you can't figure it out. I consider this question answered.
– Gordon
Nov 28 '18 at 12:29
Yes, sir. That issue got resolved, my code had some issue.
– Shahabaz
Nov 28 '18 at 14:34
Thank you so much I managed to create a bar chart. Now it turns out to be a problem with the filter. When the bars are selected it says point.map is not a function it filters certain chart but not all the charts on the screen.
– Shahabaz
Nov 27 '18 at 18:25
Thank you so much I managed to create a bar chart. Now it turns out to be a problem with the filter. When the bars are selected it says point.map is not a function it filters certain chart but not all the charts on the screen.
– Shahabaz
Nov 27 '18 at 18:25
I don't think you need any more steps for the "tag dimension" and this bar chart. Sounds like you are running into a new, unrelated problem with your scatter plot definition now. (It helps to look at the source of the error.) Maybe the dimension/group for your scatter plot is not producing arrays of size 2 (points)? Remember, you only want to use the second argument to
crossfilter.dimension when your key function returns multiple values - you probably don't want it for your scatter plot dimension.– Gordon
Nov 28 '18 at 12:27
I don't think you need any more steps for the "tag dimension" and this bar chart. Sounds like you are running into a new, unrelated problem with your scatter plot definition now. (It helps to look at the source of the error.) Maybe the dimension/group for your scatter plot is not producing arrays of size 2 (points)? Remember, you only want to use the second argument to
crossfilter.dimension when your key function returns multiple values - you probably don't want it for your scatter plot dimension.– Gordon
Nov 28 '18 at 12:27
Feel free to open another question if you can't figure it out. I consider this question answered.
– Gordon
Nov 28 '18 at 12:29
Feel free to open another question if you can't figure it out. I consider this question answered.
– Gordon
Nov 28 '18 at 12:29
Yes, sir. That issue got resolved, my code had some issue.
– Shahabaz
Nov 28 '18 at 14:34
Yes, sir. That issue got resolved, my code had some issue.
– Shahabaz
Nov 28 '18 at 14:34
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.
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%2f53395393%2fusing-dc-js-on-nested-json-to-create-bar-chart%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
