Обновить Div и Data Chartjs - PullRequest
0 голосов
/ 04 октября 2019

Я знаю, что эта проблема может повториться, но я не могу обновить свои графики с помощью Chart.js. Мне нужен доступ к API каждые 30 секунд, и по истечении этого времени данные на моем графике обновляются

С помощью приведенного ниже кода я смог обновить свой div, но график больше не генерируется. Мне нужно перезагрузить страницу, чтобы иметь возможность сгенерировать новый график, а я этого не хочу. Мне нужно каждые 30 секунд обновлять диаграмму из данных API чтения.

index.html

{% block content %}
<div id="auto" class="row">
    {% for row in list %}
        <div class="col-xs-6 col-md-4">
            <div class="card">
                <h5 class="card-header">{{row.description}}</h5>
                <canvas id="myChart-{{ forloop.counter }}" class="piechart"></canvas>
                <a href="{% url 'row_details' pk=row.pk %}" class="btn botao-detalhar">Detalhar</a>
            </div>
        </div>
    {% endfor %}
</div>
{% endblock content %}

scripts.js

<script>
    $(document).ready( function(){
        refresh();
    });

    window.onload = function() {
        var endpointTemp = '/api/wd/t/1/'

        $.ajax({
            method: "GET",
            url: endpointTemp,
            success: function(data){

                var row = []
                var value = []

                row = data.row
                value = data.value
                generateGaugeCharts(row, value)
            },
            error: function(error_data){
                console.log("error")
                console.log(error_data)
            }
        })
    }

function refresh() {
    setTimeout( function() {
      $('#piechart').fadeOut('slow').fadeIn('slow');
      refresh();
    }, 2000);
}

</script>

Как он закодированстраница обновляется по мере необходимости, но моя графика не обновляется новыми данными, полученными с помощью API var endpointTemp =/api/ wd/t/1/

...