How to use forEach loop on my array to plot x and y variables on my chart (Chart.js)

Question

I'm trying to use a forEach loop to iterate over my array that holds my x and y variables, and plot them on my chart. However, it doesnt loop through the array correctly, and when I console.log the item, only the first two indices will get outputted.

This is the array before the forEach loop.

newArray = [
 [
 68.7,
 6069.793943786011
 ],
 [
 69.1,
 5879.904689004858
 ],
 [
 69.3,
 5784.960061614278
 ],
 [
 71.1,
 4930.458415099063
 ],
 [
 71.8,
 4598.152219232035
 ],
 [
 73,
 4028.4844548885576
 ],
 [
 73.2,
 3933.539827497977
 ],
 [
 73.6,
 3743.6505727168224
 ],
 [
 74.5,
 3316.399749459213
 ],
 [
 74.7,
 3221.4551220686317
 ],
 [
 74.8,
 3173.9828083733455
 ],
 [
 75.6,
 2794.2042988110297
 ],
 [
 75.7,
 2746.7319851157354
 ],
 [
 76.5,
 2366.9534755534196
 ],
 [
 76.6,
 2319.4811618581325
 ],
 [
 77.2,
 2034.647279686391
 ],
 [
 77.4,
 1939.7026522958095
 ],
 [
 78.4,
 1464.9795153429131
 ],
 [
 78.6,
 1370.034887952339
 ],
 [
 78.8,
 1275.0902605617584
 ],
 [
 80.1,
 657.9501825229945
 ],
 [
 80.4,
 515.5332414371196
 ],
 [
 80.6,
 420.58861404654635
 ],
 [
 81,
 230.69935926538437
 ],
 [
 81.7,
 0
 ],
 [
 82.4,
 0
 ],
 [
 83.1,
 0
 ],
 [
 83.3,
 0
 ],
 [
 83.7,
 0
 ],
 [
 83.8,
 0
 ]
]

This is the output of the array after I loop through it with just console.log inside and not the chart.

newArray.forEach(function (item){
 console.log(item)
})
 [68.7, 6069.793943786011]
 [69.1, 5879.904689004858]
 [69.3, 5784.960061614278]
 [71.1, 4930.458415099063]
 [71.8, 4598.152219232035]
 [73, 4028.4844548885576]
 [73.2, 3933.539827497977]
 [73.6, 3743.6505727168224]
 [74.5, 3316.399749459213]
 [74.7, 3221.4551220686317]
 [74.8, 3173.9828083733455]
 [75.6, 2794.2042988110297]
 [75.7, 2746.7319851157354]
 [76.5, 2366.9534755534196]
 [76.6, 2319.4811618581325]
 [77.2, 2034.647279686391]
 [77.4, 1939.7026522958095]
 [78.4, 1464.9795153429131]
 [78.6, 1370.034887952339]
 [78.8, 1275.0902605617584]
 [80.1, 657.9501825229945]
 [80.4, 515.5332414371196]
 [80.6, 420.58861404654635]
 [81, 230.69935926538437]
 [81.7, 0]
 [82.4, 0]
 [83.1, 0]
 [83.3, 0]
 [83.7, 0]
 [83.8, 0]

Then I take the forEach and try to iterate it over my chart, like this. However this method doesn't populate the chart and the only thing that gets logged to the console are the first two items. If anyone has any advice on how I can successfully loop through my array to plot the x and y variables, it would be greatly appreciated! Thanks!

 [68.7, 6069.793943786011]
 [69.1, 5879.904689004858]
 newArray.forEach(function (item) {
 console.log(item)
 const config = {
 data: {
 datasets: [{
 type: 'line',
 label: 'Low Limit',
 data: [{
 x: item[0],
 y: item[1]
 }],
 fill: false,
 pointRadius: 0,
 tension: 0.1,
 borderColor: 'rgb(0, 128, 0)',
 }]
 },
 options: {
 scales: {
 y: {
 beginAtZero: true
 }
 }
 }
 };
 let ctx = document.getElementById('myChart').getContext('2d');
 let myChart = new Chart(ctx, config);
 })

Answer 1

you can try like this.

 newArr.forEach((items) => 
 console.log(items)
 let values = {
 items[0], items[1]
 }
let ctx = document.getElementById('myChart').getContext('2d');
 let myChart = new Chart(ctx, values);
 )

• Matthew: I would still need to add all the other configuration options though.

Answer 2

I think you are looking for a scatter chart but not line chart

const config = {
 data: {
 datasets: [{
 type: 'scatter',
 label: 'Low Limit',
 data: newArr.map(a => { return { x: a[0], y: a[1] } }),
 fill: false, 
 borderColor: 'rgb(0, 128, 0)',
 }]
 },
 options: {
 scales: {
 y: {
 beginAtZero: true
 }
 }
 }
};

Example JSFiddle

Answer 3

I think the problem is because you are creating the config property in each iteration on the array.

In this code bellow, I suggest you use 'map' only for defining the properties x and y and pass them to the config once.

const config = {
 data: {
 datasets: [{
 type: 'line',
 label: 'Low Limit',
 data: newArray.map(([x, y]) => { x, y }),
 fill: false,
 pointRadius: 0,
 tension: 0.1,
 borderColor: 'rgb(0, 128, 0)',
 }]
 },
 options: {
 scales: {
 y: {
 beginAtZero: true
 }
 }
 }
};
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, config);

Answer 4

You don't need a for loop at all if you use Object.fromEntries()

const entries = new Map(newArray);
const obj = Object.fromEntries(entries);
var data = {
 datasets: [{
 label: 'My First Dataset',
 data: obj,
 fill: false,
 borderColor: 'rgb(75, 192, 192)',
 tension: 0.1,
 }]
};
const config = {
 type: 'line',
 data: data,
 options: { 
 animation: false,
 }
};
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, config);

Here is a JSFiddle.

• Jesper: This actually breaks the order as the values are ordered like strings. Oh Javascript.