My Plotly chart is generating random traces instead of a line

plotly.js
1

This function should generate a line following the value of the numbers received from socket.on, but instead of generating a line, each time the socket is updated it generates a trace at the side of the chart, while the chart stays empty. Any opinion on why is that happening?

var arr = [];

  socket.on('two', function(msg) {
    
    Plotly.plot('chart',[{
      y:[0],
      type:'line'
    }]);

    var cnt = 0;
    setInterval(function(){
        Plotly.extendTraces('chart',{ y:[[arr]]}, [0]);
        cnt++;
        if(cnt > 500) {
            Plotly.relayout('chart',{
                xaxis: {
                    range: [cnt-500,cnt]
                }
            });
        }
    },15);

    arr.push(msg.num)
    console.log(arr)

  });
2

Moving that Plotly.plot call out of your socket.on callback should do the trick.

3

Got it. Should work now. Thank you!