Loading real time data in javascript chart that shows old data too with Django Framework

I have a Django Framework project (Python) and I want to add a real-time chart to my webpage. For that, I am using Plotly. In my script in javascript, I am generating random numbers and plotting them in the chart. Now, I want to plot specific data (coming from POST requests thanks to Django Rest Framework) so that the user can check that real-time data, together with old data (for example, from yesterday). The thing is that javascript is running on the client side, which means that my chart starts when the user reloads the page, so there is no old data to load, he can just check real-time one. If he reloads the site, the previous data will disappear too. Any idea of how to achieve this? My script is:

<script>
        function rand() {
        return Math.random();
        }
  
        var time = new Date();
  
        var data = [{
          x: [time], 
          y: [rand()],
          mode: 'line',
          line: {color: '#80CAF6'}
        }]
  
        Plotly.plot('chart', data);  
  
        var cnt = 0;
  
        var interval = setInterval(function() {
          
          var time = new Date();
          
          var update = {
          x:  [[time]],
          y: [[rand()]]
          }
          
          Plotly.extendTraces('chart', update, [0])
        
          if(cnt > 100) {
            Plotly.relayout('chart',{
                xaxis: {
                range: [cnt-100,cnt]
              }
              });
          }
        }, 1000);
  
</script>```

Back to Top