CODEWITHSUNDEEP
javascriptjqueryarraysforeachchart.js
Matthew
Matthew

Reputation: 271

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

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

Upvotes: 0

Views: 2425

Answers (4)

Jesper
Jesper

Reputation: 1076

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.

Upvotes: 0

Kássio Maia
Kássio Maia

Reputation: 11

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

Upvotes: 0

lamtacvu
lamtacvu

Reputation: 685

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

Upvotes: 1

Teddy Ferdian
Teddy Ferdian

Reputation: 49

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

Upvotes: 3

Related Questions