How can i have historical data on my real-time chart?

plotly.js
1

I have a webpage where some data is printed in real time. I want to have this data on a chart, for that i’m using Plotly.js.
I managed to have my data shown in real time on a basic chart, but there is one big fundamental problem: the chart will start working once the user opens the webpage, meaning that there won’t be data BEFORE opening the webpage.

I’m trying to have it showing both the data before my page gets opened on a browser and the real-time data. Is it possible to accomplish that?

Here is my code, every advice or help is highly appreciated:
$(document).ready(function() {
//connect to the socket server.
var socket = io.connect(‘http://’ + document.domain + ‘:’ + location.port + ‘/test’);
var numbers_received = [];

  //receive details from server
  socket.on('newnumber', function(msg) {
    console.log("Received" + msg.number);
    //maintain a list of ten numbers
    if (numbers_received.length >= 1) {
      numbers_received.shift()
    }

    
    numbers_received.push(msg.number);
    numbers_string = '';
    for (var i = 0; i < numbers_received.length; i++) {
      numbers_string = numbers_string + '<p>' + numbers_received[i].toString() + '</p>';
    }
    $('#log').html(numbers_string);
  });


  
  function getData() {

                }
                Plotly.plot('chart',[{
                    y:[numbers_received[0]],
                    type:'line'
                }]);

                console.log('TEST' + numbers_received[0]);
                
                var cnt = 0;
                setInterval(function(){
                    Plotly.extendTraces('chart',{ y:[[numbers_received[0]]]}, [0]);
                    cnt++;
                    if(cnt >100000000000000000000) {
                        Plotly.relayout('chart',{
                            xaxis: {
                                range: [cnt-9,cnt]
                            }
                        });
                    }
                },15);

});