Загрузка данных в реальном времени в диаграмму javascript, которая показывает и старые данные с помощью Django Framework

У меня есть проект Django Framework (Python) и я хочу добавить график реального времени на свою веб-страницу. Для этого я использую Plotly. В моем сценарии на javascript я генерирую случайные числа и отображаю их на графике. Теперь я хочу построить график конкретных данных (поступающих из POST-запросов благодаря Django Rest Framework ), чтобы пользователь мог проверить эти данные в реальном времени, а также старые данные (например, за вчерашний день). Дело в том, что javascript работает на стороне клиента, что означает, что мой график запускается, когда пользователь перезагружает страницу, поэтому нет необходимости загружать старые данные, он может проверить только данные в реальном времени. Если он перезагрузит сайт, предыдущие данные тоже исчезнут. Есть идеи, как этого добиться? Мой скрипт выглядит следующим образом:

<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>```
Вернуться на верх