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);
            })

CodePudding user response：

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);
        )

CodePudding user response：

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

CodePudding user response：

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);