I am a bit struggling to understand this issue: There are two plots with two different data passed in y: data as you can see at the first snippet below, instead of manually writing all the plots like in it, and since my original data have an arbitrary length (1, N), is there a clever way to define the plots in the for loop?

This is a dummy but working version.

Plotly.newPlot("plot", [{
  y: [getData()], // calls Math.random()
  type: 'line',
  line: {
    color: 'rgb(142, 142, 142)',
    width: 1
  },
}, {
  y: [getSData()], // calls Math.random()
  type: 'line',
  line: {
    color: 'rgb(142, 142, 142)',
    width: 1
  },
}

], layout, config);

I have tried to convert this snippet to with the for loop version, as I mentioned above my data has an arbitrary length [[1], ..., [N]].

let ob;
let PLOTS = Plotly.newPlot("plot", ob, layout, config)

// console.log(pos) => [Array(1)] 

for (let i = 0; i < pos.length; i++){
  ob.y = pos[I] // this spits an error
  ob.type = 'line'
  ob.color =  'rgb(142, 142, 142)'
}

let cnt = 0

setInterval(function(){
  Plotly.extendTraces('plot', {y: pos}, [...Array(pos.length).keys()]);

  cnt ++

  if (cnt > 128) {

    Plotly.relayout("plot", {
      xaxis: {
        range: [cnt-128, cnt]
      }
    });
  }

}, 20);

I am getting an error Uncaught TypeError: Cannot set properties of undefined (setting 'y') at ob.y = pos[i] I am not familiar with the language and the errors, therefore I might need a bit help. Thanks.