I'm trying to create bar chart using Chart.js. I got stuck trying to create grouped bar chart based on the status per user. So here's the data:
[{statusId: 0, firstName: "Joe", status: "appealed", count: 1},
{statusId: 0, firstName: "Jane", status: "approved", count: 100},
{statusId: 0, firstName: "Smith", status: "approved", count: 63},
{statusId: 0, firstName: "Mike", status: "approved", count: 63},
{statusId: 0, firstName: "Ken", status: "approved", count: 35},
{statusId: 0, firstName: "Kim", status: "approved", count: 193},
{statusId: 0, firstName: "Joe", status: "approved", count: 1},
{statusId: 0, firstName: "Jane", status: "closed", count: 1},
{statusId: 0, firstName: "Joe", status: "concluded", count: 1},
{statusId: 0, firstName: "Jane", status: "denied", count: 6},
{statusId: 0, firstName: "Smith", status: "denied", count: 9},
{statusId: 0, firstName: "Mike", status: "denied", count: 1},
{statusId: 0, firstName: "Mark", status: "denied", count: 8},
{statusId: 0, firstName: "Ken", status: "denied", count: 2},
{statusId: 0, firstName: "Kim", status: "denied", count: 20},
{statusId: 0, firstName: "Joe", status: "denied", count: 2},
{statusId: 0, firstName: "Joe", status: "transferred", count: 1}]
From this data, I need to create a chart for users in x-axis with count of each status for the user. It can be easily done in Chartjs by having array of datasets like the following:
datasets:[{
data: [//some counts for a group],
},
{
data: [// counts for another group],
}
// and so on
}]
The problem is I'll need to group these data based on the status. So, one solution I can think of is:
angular.forEeach(data, function(val)){
switch(val.status){
case 'approved':
// add count to an approved count array
break;
case 'appealed':
// add count to appealed count array
break;
}
}
But I think there're problems with this one. What if they create another status e.g. pending. Then I'll have to go back and change the code. Is there anyway I can group the objects by status and create an array of count data for each group that I can then use in datasets?
I just signed up for javascript course in pluralsight, so it'll still take me a while to learn advanced javascript. In the meantime, can anyone show me the proper and efficient way to solve this puzzle?
EXAMPLE
Chart.js requires data to be in the following format:
var data = {
labels: ['Joe', 'Jane', 'Smith', 'Mike', 'Ken', 'Kim', 'Mark'],
datasets: [
{
label: 'Appealed',
fillColor: '#382765',
data: [1,0,0,0,0,0,0]
},
{
label: 'Approved',
fillColor: '#7BC225',
data: [1, 100, 63, 63, 35, 193,0]
},
{
label: 'Denied',
fillColor: '#2196F3',
data: [2, 6, 9, 1, 2, 20, 8]
},
]
}
So, what's happening here is for each item in labels there's a count for the status i.e. label in data array inside datasets array. For e.g.: data array for Appealed label: 1 is the count of appealed for Joe and rest is 0 for all other users.