im using JSON to return an array.
Json:
const data = [{
"week": 1,
"lost": 10,
"recovery_timespan": [{
"week": 2,
"count": 1
}, {
"week": 3,
"count": 0
}],
"netLost": 10,
"netReturned": 20
}, {
"week": 2,
"lost": 7,
"recovery_timespan": [{
"week": 3,
"count": 1
}, {
"week": 4,
"count": 3
}],
"netLost": 30,
"netReturned": 200
}, {
"week": 3,
"lost": 8,
"recovery_timespan": [{
"week": 4,
"count": 1
}],
"netLost": 50,
"netReturned": 40
}];
i need to get the data into a array with lost,counts of recovery_timespan,netLost,netReturned.
Expected Output:
[ [ 10, 1, 0, 10, 20 ],
[ 7, 1, 3, 30, 200 ],
[ 8, 1, 50, 40 ] ]
My approach:
const result = data.map(({lost, recovery_timespan,netLost,netReturned}) => [
lost,
...recovery_timespan.map(({count}) => count),
,netLost,netReturned
]);
console.log(result);
and this return array with <1 empty item>:
[ [ 10, 1, 0, <1 empty item>, 10, 20 ],
[ 7, 1, 3, <1 empty item>, 30, 200 ],
[ 8, 1, <1 empty item>, 50, 40 ] ]
Wha is the issue here?
Why am i getting <1 empty item>
You have an extra comma:
const result = data.map(({lost, recovery_timespan,netLost,netReturned}) => [
lost,
...recovery_timespan.map(({count}) => count),
here ---> ,netLost,netReturned
]);
Just remove it.
You have an additional , after the nested map:
const result = data.map(({lost, recovery_timespan,netLost,netReturned}) => [
lost,
...recovery_timespan.map(({count}) => count), // <--
,netLost,netReturned
//^--
]);
That creates a hole in the array. That's why you are seeing <1 empty item> in the output
console.log([1,,2])
const res = data.map((el) => [
el.lost,
...el.recovery_timespan.map((timespan) => timespan.count),
/* extra comma here --> */, el.netLost,
el.netReturned
])
[ [ 10, 1, 0, 10, 20 ], [ 7, 1, 3, 30, 200 ], [ 8, 1, 50, 40 ] ]
Not completly sure, but maybe try this.
...recovery_timespan.map(({count}) => count.count)
I want to show visualization of machines downtime for 2 shifts - day (12-hr) and night (12-hr) for 30 days. Thus, I use the stacked bar chart with groups and it looks good accept that I don't want to have the legends to show both shifts (day & night).
stacked bar chart with groups
<canvas id="myChart"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30",],
datasets: [{
label: 'Machine 1 - Day',
stack: 'Stack 0',
data: [5, 13, 5, 20, 4, 9, 28, 19, 21, 5, 13, 7, 21, 26, 10, 28, 19, 21, 30, 10, 27, 6, 12, 15, 4, 2, 13, 8, 29, 30],
backgroundColor: '#FF4A4A',
},
{
label: 'Machine 1 - Night',
stack: 'Stack 1',
data: [5, 13, 5, 20, 4, 9, 28, 19, 21, 5, 13, 7, 21, 26, 10, 28, 19, 21, 30, 10, 27, 6, 12, 15, 4, 2, 13, 8, 29, 30],
backgroundColor: '#FF4A4A',
},
{
label: 'Machine 2 - Day',
stack: 'Stack 0',
data: [5, 13, 5, 20, 4, 9, 28, 19, 21, 5, 13, 7, 21, 26, 10, 28, 19, 21, 30, 10, 27, 6, 12, 15, 4, 2, 13, 8, 29, 30],
backgroundColor: '#FF9C2A',
},
{
label: 'Machine 2 - Night',
stack: 'Stack 1',
data: [12, 13, 5, 20, 4, 9, 28, 19, 21, 5, 13, 7, 21, 26, 10, 28, 19, 21, 30, 10, 27, 6, 12, 15, 4, 2, 13, 8, 29, 30],
backgroundColor: '#FF9C2A',
},
]
},
options: {
plugins: {
legend: {
display: true
}
},
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
</script>
How do I combine the machine 1 or 2 for day & night shift in the legend and clicking machine 1 or 2 will hide both shifts (day & night)
stacked bar chart with groups edit Legend
I found the method below that might work for me.
https://www.chartjs.org/docs/3.1.0/configuration/legend.html#custom-on-click-actions
click handler of the first two datasets
How do I proceed for second two datasets of the click handler and so on accordingly.
<canvas id="myChart"></canvas>
<script>
var defaultLegendClickHandler = Chart.defaults.plugins.legend.onClick;
var newLegendClickHandler = function (e, legendItem, legend) {
var index = legendItem.datasetIndex;
if (index > 1) {
// Do the original logic
defaultLegendClickHandler(e, legendItem);
} else {
let ci = legend.chart;
[
ci.getDatasetMeta(0),
ci.getDatasetMeta(1)
].forEach(function (meta) {
meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;
});
ci.update();
}
};
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30",],
datasets: [{
label: 'Machine 1 - Day',
stack: 'Stack 0',
data: [5, 13, 5, 20, 4, 9, 28, 19, 21, 5, 13, 7, 21, 26, 10, 28, 19, 21, 30, 10, 27, 6, 12, 15, 4, 2, 13, 8, 29, 30],
backgroundColor: '#FF4A4A',
},
{
label: 'Machine 1 - Night',
stack: 'Stack 1',
data: [5, 13, 5, 20, 4, 9, 28, 19, 21, 5, 13, 7, 21, 26, 10, 28, 19, 21, 30, 10, 27, 6, 12, 15, 4, 2, 13, 8, 29, 30],
backgroundColor: '#FF4A4A',
},
{
label: 'Machine 2 - Day',
stack: 'Stack 0',
data: [5, 13, 5, 20, 4, 9, 28, 19, 21, 5, 13, 7, 21, 26, 10, 28, 19, 21, 30, 10, 27, 6, 12, 15, 4, 2, 13, 8, 29, 30],
backgroundColor: '#FF9C2A',
},
{
label: 'Machine 2 - Night',
stack: 'Stack 1',
data: [12, 13, 5, 20, 4, 9, 28, 19, 21, 5, 13, 7, 21, 26, 10, 28, 19, 21, 30, 10, 27, 6, 12, 15, 4, 2, 13, 8, 29, 30],
backgroundColor: '#FF9C2A',
},
]
},
options: {
plugins: {
legend: {
onClick: newLegendClickHandler
}
},
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
</script>
First you need to define a legend.labels.generateLabels function that filter out undesired legend labels and changes the text of the remaining ones.
generateLabels: chart => chart.data.datasets.map((ds, i) => ({
text: ds.label.substring(0, ds.label.indexOf('-')),
datasetIndex: i,
fillStyle: chart.data.datasets[i].backgroundColor,
strokeStyle: chart.data.datasets[i].backgroundColor,
hidden: chart.getDatasetMeta(i).hidden
}))
.filter((ds, i) => i % 2),
Then you'll have to define a legend.onClick function that takes care of also showing/hiding the sibling dataset when the user clicks on a legend label.
onClick: (event, legendItem, legend) => {
let hidden = !legend.chart.getDatasetMeta(legendItem.datasetIndex).hidden;
(legendItem.datasetIndex == 1 ? [0, 1] : [2, 3])
.forEach(i => legend.chart.getDatasetMeta(i).hidden = hidden);
legend.chart.update();
}
For further details, see the Legend and API chapters of the Chart.js documentation.
Please take a look at your amended code and see how it works.
new Chart('chart', {
type: 'bar',
data: {
labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", ],
datasets: [{
label: 'Machine 1 - Day',
stack: 'Stack 0',
data: [5, 13, 5, 20, 4, 9, 28, 19, 21, 5, 13, 7, 21, 26, 10, 28, 19, 21, 30, 10, 27, 6, 12, 15, 4, 2, 13, 8, 29, 30],
backgroundColor: '#FF4A4A',
},
{
label: 'Machine 1 - Night',
stack: 'Stack 1',
data: [5, 13, 5, 20, 4, 9, 28, 19, 21, 5, 13, 7, 21, 26, 10, 28, 19, 21, 30, 10, 27, 6, 12, 15, 4, 2, 13, 8, 29, 30],
backgroundColor: '#FF4A4A',
},
{
label: 'Machine 2 - Day',
stack: 'Stack 0',
data: [5, 13, 5, 20, 4, 9, 28, 19, 21, 5, 13, 7, 21, 26, 10, 28, 19, 21, 30, 10, 27, 6, 12, 15, 4, 2, 13, 8, 29, 30],
backgroundColor: '#FF9C2A',
},
{
label: 'Machine 2 - Night',
stack: 'Stack 1',
data: [12, 13, 5, 20, 4, 9, 28, 19, 21, 5, 13, 7, 21, 26, 10, 28, 19, 21, 30, 10, 27, 6, 12, 15, 4, 2, 13, 8, 29, 30],
backgroundColor: '#FF9C2A',
}
]
},
options: {
plugins: {
legend: {
labels: {
generateLabels: chart => chart.data.datasets.map((ds, i) => ({
text: ds.label.substring(0, ds.label.indexOf('-')),
datasetIndex: i,
fillStyle: chart.data.datasets[i].backgroundColor,
strokeStyle: chart.data.datasets[i].backgroundColor,
hidden: chart.getDatasetMeta(i).hidden
}))
.filter((ds, i) => i % 2),
},
onClick: (event, legendItem, legend) => {
let hidden = !legend.chart.getDatasetMeta(legendItem.datasetIndex).hidden;
(legendItem.datasetIndex == 1 ? [0, 1] : [2, 3])
.forEach(i => legend.chart.getDatasetMeta(i).hidden = hidden);
legend.chart.update();
}
}
},
scales: {
x: {
stacked: true,
},
y: {
stacked: true
}
}
}
});
canvas {
max-height: 190px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
<canvas id="chart"></canvas>
Hey I got something like this working, but I am hiding everything with the same stack variable and hiding certain data series as well so I can hide them without having their legend items available for click:
I have a lot of series that have the same datasets (ie, failed numbers, retested numbers and dont want to show those labels)
// Get Data From Views and Add Custom onClick Listener
let tempData = { ...views[i].data };
if (
// Kill the onClick and add a much slower but grouping onClick, hide all with part number in stack
tempData &&
tempData.options &&
tempData.options.plugins &&
tempData.options.plugins.legend
)
tempData.options.plugins.legend.onClick = (e, legendItem) => {
// My labels always start with the part number and a space so I grab that.
const partName = legendItem.text.split(' ')[0];
const chart = Chart.getChart('temp-chart');
// Toggle the data set that was clicked on
const datasetIndex = legendItem.datasetIndex;
if (!chart.getDatasetMeta(datasetIndex).hidden) chart.hide(datasetIndex);
else chart.show(datasetIndex);
let j = 0;
// Iterate through all datasets, cap at 200 for safety
while (chart.getDatasetMeta(j).stack && j < 200) {
const datasetMeta = chart.getDatasetMeta(j);
const stack = datasetMeta.stack;
const datasetName = datasetMeta.label;
// I add a stack id to all my datasets and use that to determine what is 'grouped'
// I have a plugin that does not render any datasets which do not have a label
// If the stack group matches and the dataset does not have a label it will be hidden.
if (
stack === partName &&
(datasetName == null ||
datasetName === '' ||
datasetName === 'undefined')
) {
if (!chart.getDatasetMeta(j).hidden) chart.hide(j);
else chart.show(j);
}
j++;
}
};
new Chart('temp-chart', { ...tempData });
And the legend plugin to hide legend items with no label.
Chart.defaults.plugins.legend.labels.filter = (item) => {
return item.text != null;
};
Heres what I got - Pictures
This question already has answers here:
Copy array by value
(39 answers)
Closed 5 years ago.
Here is my code:
var arr = [];
var obj = {};
(function() {
for(let i = 1; i <= 10; i++) {
arr.push(i);
obj[i] = arr;
}
})();
This code gave me this output:
{
'1': [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ],
'2': [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ],
'3': [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ],
'4': [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ],
'5': [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ],
'6': [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ],
'7': [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ],
'8': [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ],
'9': [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ],
'10': [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
}
Why doesn't it give an output like this?
{
'1': [ 1 ],
'2': [ 1, 2 ],
'3': [ 1, 2, 3 ],
'4': [ 1, 2, 3, 4 ],
'5': [ 1, 2, 3, 4, 5 ],
'6': [ 1, 2, 3, 4, 5, 6 ],
'7': [ 1, 2, 3, 4, 5, 6, 7 ],
'8': [ 1, 2, 3, 4, 5, 6, 7, 8 ],
'9': [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ],
'10': [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
}
When you push, you're pushing the reference to the same array each time. What you actually want is to create a new array each time rather than reference the same one.
Check out this SO answer for more info Javascript by reference vs. by value
You could do this by pushing a copy arr using arr.slice or Array#from. At the very end arr will have all 10 numbers in it, but obj will look exactly like your output.
var arr = [];
var obj = {};
(function() {
for(let i = 1; i <= 10; i++) {
arr.push(i);
obj[i] = arr.slice();
}
console.log(obj);
})();