I would like to make the data been made dynamic according the variable 'AmountOfPoints'
Now i'm working with a switch and make the data fixed (please see example below):
__processPlot1() {
if (this.__Plot1 !== null) {
//Check how many points are used for draw the camtable
let AmountOfPoints = 0;
for (let i = 0; i < 10; i++) {
if (this.__Plot1[i].Used === true) {
AmountOfPoints++;
}
}
//console.log("AmountOfPoints: " + AmountOfPoints);
switch (AmountOfPoints) {
case 10:
this.__Plot.data.datasets[0] = {
data: [
{ x: this.__Plot1[0].X, y: this.__Plot1[0].Y },
{ x: this.__Plot1[1].X, y: this.__Plot1[1].Y },
{ x: this.__Plot1[2].X, y: this.__Plot1[2].Y },
{ x: this.__Plot1[3].X, y: this.__Plot1[3].Y },
{ x: this.__Plot1[4].X, y: this.__Plot1[4].Y },
{ x: this.__Plot1[5].X, y: this.__Plot1[5].Y },
{ x: this.__Plot1[6].X, y: this.__Plot1[6].Y },
{ x: this.__Plot1[7].X, y: this.__Plot1[7].Y },
{ x: this.__Plot1[8].X, y: this.__Plot1[8].Y },
{ x: this.__Plot1[9].X, y: this.__Plot1[9].Y },
],
fill: false,
showLine: true,
tension: 0,
borderColor: "#CD5C5C",
pointRadius: 7,
};
break;
case 9:
this.__Plot.data.datasets[0] = {
data: [
{ x: this.__Plot1[0].X, y: this.__Plot1[0].Y },
{ x: this.__Plot1[1].X, y: this.__Plot1[1].Y },
{ x: this.__Plot1[2].X, y: this.__Plot1[2].Y },
{ x: this.__Plot1[3].X, y: this.__Plot1[3].Y },
{ x: this.__Plot1[4].X, y: this.__Plot1[4].Y },
{ x: this.__Plot1[5].X, y: this.__Plot1[5].Y },
{ x: this.__Plot1[6].X, y: this.__Plot1[6].Y },
{ x: this.__Plot1[7].X, y: this.__Plot1[7].Y },
{ x: this.__Plot1[8].X, y: this.__Plot1[8].Y },
],
fill: false,
showLine: true,
tension: 0,
borderColor: "#CD5C5C",
pointRadius: 7,
};
break;
case 8:
this.__Plot.data.datasets[0] = {
data: [
{ x: this.__Plot1[0].X, y: this.__Plot1[0].Y },
{ x: this.__Plot1[1].X, y: this.__Plot1[1].Y },
{ x: this.__Plot1[2].X, y: this.__Plot1[2].Y },
{ x: this.__Plot1[3].X, y: this.__Plot1[3].Y },
{ x: this.__Plot1[4].X, y: this.__Plot1[4].Y },
{ x: this.__Plot1[5].X, y: this.__Plot1[5].Y },
{ x: this.__Plot1[6].X, y: this.__Plot1[6].Y },
{ x: this.__Plot1[7].X, y: this.__Plot1[7].Y },
],
fill: false,
showLine: true,
tension: 0,
borderColor: "#CD5C5C",
pointRadius: 7,
};
break;
case 7:
this.__Plot.data.datasets[0] = {
data: [
{ x: this.__Plot1[0].X, y: this.__Plot1[0].Y },
{ x: this.__Plot1[1].X, y: this.__Plot1[1].Y },
{ x: this.__Plot1[2].X, y: this.__Plot1[2].Y },
{ x: this.__Plot1[3].X, y: this.__Plot1[3].Y },
{ x: this.__Plot1[4].X, y: this.__Plot1[4].Y },
{ x: this.__Plot1[5].X, y: this.__Plot1[5].Y },
{ x: this.__Plot1[6].X, y: this.__Plot1[6].Y },
],
fill: false,
showLine: true,
tension: 0,
borderColor: "#CD5C5C",
pointRadius: 7,
};
break;
case 6:
this.__Plot.data.datasets[0] = {
data: [
{ x: this.__Plot1[0].X, y: this.__Plot1[0].Y },
{ x: this.__Plot1[1].X, y: this.__Plot1[1].Y },
{ x: this.__Plot1[2].X, y: this.__Plot1[2].Y },
{ x: this.__Plot1[3].X, y: this.__Plot1[3].Y },
{ x: this.__Plot1[4].X, y: this.__Plot1[4].Y },
{ x: this.__Plot1[5].X, y: this.__Plot1[5].Y },
],
fill: false,
showLine: true,
tension: 0,
borderColor: "#CD5C5C",
pointRadius: 7,
};
break;
case 5:
this.__Plot.data.datasets[0] = {
data: [
{ x: this.__Plot1[0].X, y: this.__Plot1[0].Y },
{ x: this.__Plot1[1].X, y: this.__Plot1[1].Y },
{ x: this.__Plot1[2].X, y: this.__Plot1[2].Y },
{ x: this.__Plot1[3].X, y: this.__Plot1[3].Y },
{ x: this.__Plot1[4].X, y: this.__Plot1[4].Y },
],
fill: false,
showLine: true,
tension: 0,
borderColor: "#CD5C5C",
pointRadius: 7,
};
break;
case 4:
this.__Plot.data.datasets[0] = {
data: [
{ x: this.__Plot1[0].X, y: this.__Plot1[0].Y },
{ x: this.__Plot1[1].X, y: this.__Plot1[1].Y },
{ x: this.__Plot1[2].X, y: this.__Plot1[2].Y },
{ x: this.__Plot1[3].X, y: this.__Plot1[3].Y },
],
fill: false,
showLine: true,
tension: 0,
borderColor: "#CD5C5C",
pointRadius: 7,
};
break;
}
}
this.__Plot.update();
}
This is working, but i would like to have it be dynamic, if for example i would have 50 points, i don't need to add them all manually like in my example above, thank you
This is an example how the array looks like
Plot1 is receiving the data from that array (it has valid data)
Update: the result of the requested console.log:
You mean something like
// test data
const Plot1 = [
{"Used":true, "X":1,"Y":10},
{"Used":true, "X":2,"Y":20},
{"Used":false,"X":3,"Y":30}, // will be skipped
{"Used":true, "X":4,"Y":40}
];
const plots = Plot1; // this.__Plot1; // change back to this.Plot1
const data = plots
.filter(({Used}) => Used)
.map(({X, Y}) => ({x:X, y:Y}));
console.log(data)
/* Uncomment when happy
this.__Plot.data.datasets[0] = {
data: data,
fill: false,
showLine: true,
tension: 0,
borderColor: "#CD5C5C",
pointRadius: 7
};*/