Multiple date array with same value by name on Highcharts - arrays

Question

I want to custom highcharts, but before that I am stuck how to combine or manage multiple arrays with the same date and name value from JSON
// sample data JSON
const dataJson = [
{
"day": 1,
"month": 10,
"name": "John",
"value": 1000.0
},
{
"day": 1,
"month": 10,
"name": "Joe",
"value": 2000.0
},
{
"day": 2,
"month": 10,
"name": "John",
"value": 2000
},
{
"day": 2,
"month": 10,
"name": "Joe",
"value": 500
},
{
"day": 2,
"month": 10,
"name": "Joe",
"value": 500
},
{
"day": 2,
"month": 10,
"name": "Jane",
"value": 500
},
{
"day": 3,
"month": 10,
"name": "John",
"value": 1500
},
{
"day": 3,
"month": 10,
"name": "John",
"value": 2000
},
{
"day": 4,
"month": 10,
"name": "Jane",
"value": 1500
},
{
"day": 5,
"month": 10,
"name": "Janet",
"value": 1000
}
]
I want implement the above JSON into this highchart function:
Like merge day and month then show it in xAxis categories be day/month.
ex: day 1 and month 10 => 1/10.
Merge value same name in same day. Sample JSON day 2 Joe has 500 and 500. So in highchart series value for Joe is 1000 for day 2
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Total fruit consumption, grouped by gender'
},
xAxis: {
categories: ['1/10', '2/10', '3/10', '4/10', '5/10']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [1000, 2000, 3500, 0, 0],
}, {
name: 'Joe',
data: [2000, 1000, 0, 0, 0],
}, {
name: 'Jane',
data: [0, 500, 0, 1500, 0],
}, {
name: 'Janet',
data: [0, 0, 0, 0, 1000],
}]
});
Here is link to my fiddle
Thanks

Answer 1

Ok, this way is maybe not the most performant to accomplish this task, but it gets the job done:
const dataJson = [{
day: 1,
month: 10,
name: "John",
value: 1000.0,
},
{
day: 1,
month: 10,
name: "Joe",
value: 2000.0,
},
{
day: 2,
month: 10,
name: "John",
value: 2000,
},
{
day: 2,
month: 10,
name: "Joe",
value: 500,
},
{
day: 2,
month: 10,
name: "Joe",
value: 500,
},
{
day: 2,
month: 10,
name: "Jane",
value: 500,
},
{
day: 3,
month: 10,
name: "John",
value: 1500,
},
{
day: 3,
month: 10,
name: "John",
value: 2000,
},
{
day: 4,
month: 10,
name: "Jane",
value: 1500,
},
{
day: 5,
month: 10,
name: "Janet",
value: 1000,
},
];
const res = dataJson.reduce((acc, cV) => {
if (acc[cV.name]) {
acc[cV.name] = {
day: {
...acc[cV.name].day,
[cV.day]: acc[cV.name].day[cV.day] ?
acc[cV.name].day[cV.day] + cV.value :
cV.value,
},
};
} else {
acc[cV.name] = {
day: {
[cV.day]: cV.value
}
};
}
return acc;
}, {});
let result = [];
Object.keys(res).forEach(name => {
const values = {
name
};
const data = [];
for (let i = 1; i <= 5; i++) {
if (res[name].day[i]) {
data.push(res[name].day[i]);
} else {
data.push(0);
}
}
values.data = data;
result.push(values);
});
console.log(result);
In the res variable, I change the array of json data into an object with the name and day as keys. If the day exists, I add the new amount to the current one, otherwise I create the key.
After that, I loop through the object and check whether values exist in a given day. If yes, then I push it to the data, if no, I push 0 to the data. My solution is for 5 days, but you can easily adjust it for any given amount of days.