Как обновить данные внутри js без перезагрузки страницы?

Question

[schokk64rus]

Добрый вечер.

Строю графики с использованием Plotly. Хочу реализовать динамическое обновление графика.

<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);

Как реализовать обновление данных x и y внутри функции setInterval()? В текущем варианте каждый раз отрисовываются значения, которые были получены при 1-ой загрузке страницы.

Для счётчика текущего значения использую:

<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>

Но как применить что-то подобное в случае графика не пойму. Если обновлять "myDiv2" также как и в случае счётчика (это не верно), то значения x и y обновятся, но график в этом случае пропадает.

Answer 1

[Сергей Сергей]

Просто переинициализируется с добавлением в существующий массив. Метод push для добавления значений в массив.