How to update data inside js without reloading the page?

Question

JavaScript

Good evening.

I build graphs using Plotly. I want to implement dynamic update of the chart.

<div id='myDiv2'><!-- Plotly chart will be drawn inside this DIV --></div>

var data = [{
  x: [{% for er in x_h %}'{{er}}', {% endfor %}],
  y: {{y_h}},
  mode: 'lines',
  line: {color: '#80CAF6'}
}]
var layout = {
  title: 'График влажности',
  showlegend: false,
  xaxis: {title: {
          text: "Время",
          standoff: 30
        }},
  yaxis: {title: {
          text: "Влажность, %",
          standoff: 15
        },},
};

Plotly.newPlot('myDiv2', data, layout);

var cnt = 0;
var interval = setInterval(function() {
  var update = {
  x: [{% for er in x_h %}'{{er}}', {% endfor %}],
  y: {{y_h}},
  }

  Plotly.extendTraces('myDiv2', update)

  if(++cnt === 100) clearInterval(interval);
}, 1000);

How to update x and y data inside setInterval() function? In the current version, each time the values ​​that were obtained during the 1st page load are drawn.

For the current value counter I use:

<script>
   setInterval(function()
   {
   $('#temperature').load(document.URL +  ' #temperature');
   }, 10000)
</script>

<div id='temperature'>
    <div class="col-sm">
        <b><h4>Температура</h4></b>
        <i class="fa fa-thermometer-half  fa-4x" aria-hidden="true"> {{'%0.1f'|format(tempr[0]|float)}}℃</i>
        {% if status == 'True' %}
               <p><a href="#" class="text-success">В сети</a></p>
        {% else %}
               <p><a href="#" class="text-danger">Не в сети</a></p>
        {% endif %}
    </div>
</div>

But I don’t understand how to apply something similar in the case of a graph. If you update "myDiv2" in the same way as in the case of the counter (this is not true), then the x and y values ​​will be updated, but the graph will disappear in this case.

Answer 1

Simply reinitialized with addition to the existing array. The push method for adding values ​​to an array.