Добрый вечер.
Строю графики с использованием 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 обновятся, но график в этом случае пропадает.