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

Teddy Ferdian · Accepted Answer · 2021-09-23 02:03:27Z

3

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

answered Sep 23, 2021 at 2:03

Teddy Ferdian

491 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

Matthew Over a year ago

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

lamtacvu · Accepted Answer · 2021-09-23 02:30:51Z

1

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

answered Sep 23, 2021 at 2:30

lamtacvu

6951 gold badge7 silver badges14 bronze badges

Comments

Kássio Maia · Accepted Answer · 2021-09-23 02:31:57Z

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

Jesper · Accepted Answer · 2021-09-23 08:02:00Z

0

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.

answered Sep 23, 2021 at 8:02

Jesper

1,11613 silver badges27 bronze badges

1 Comment

Jesper Over a year ago

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

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related