Как создавать динамические диаграммы с Django и Chart.js? - PullRequest
Новая
       14

Как создавать динамические диаграммы с Django и Chart.js?

1 голос
/ 04 мая 2019

Я создаю веб-страницу и хочу включить диаграмму, которая отображает изменение температуры во времени.

Данные о температуре сохраняются в базе данных каждую секунду.Django извлекает эти данные и передает их в шаблон.

Django: 

def Dashboard(request):

    temp = Info.objects.using('wings').filter(localisation ='Wing_1').order_by('-time')

    time1 = []
    temperature = []

    for dataset in temp :
        time1.append(dataset.time.strftime("%Hh%M"))
        temperature.append(dataset.temp_wing)

    time1 = time1[:60]
    temperature = temperature[:60]
    time1.reverse()
    temperature.reverse()

    context = {
                'time1': time1,
                'temperature': temperature,
    }
    return render(request, 'Dashboard/dashboard.html',context)

Шаблон: 

<!DOCTYPE html>
{% load static %}

<canvas id="myChart" width="400" height="200"></canvas>

<script src="{% static 'Dashboard/js/Chart.min.js' %}"></script>

<script>
var ctx = document.getElementById('myChart').getContext('2d');

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: {{time1|safe}},
        datasets: [
        {label: 'Wing 1 temperature', data : {{temperature|safe}}, backgroundColor:['rgba(54, 162, 235, 0.2)'], borderColor: ['rgba(54, 162, 235, 1)'], borderWidth: 1}
        ]},
    options: {
        scales: { yAxes: [{ ticks: { beginAtZero: false }}]}
        }
    });

ChartUpdate(function(){
  myChart.data.datasets[0].data = {{temperature|safe}};
  myChart.data.labels = {{time1|safe}};
  myChart.update();
}, 5000);

</script>

Диаграмма правильно отображается со значением базы данных,Но я ожидал, что функция ChartUpdate в шаблоне автоматически обновит график на значение, недавно сохраненное в базе данных, но, похоже, он не работает ...

Есть ли способ автоматическиобновить значение диаграммы новым значением базы данных без перезагрузки страницы?

1 Ответ

0 голосов
/ 05 мая 2019

Благодаря комментарию drec4s я смог решить мою проблему!

Вот просмотр файла: 

def AutoUpdate(request):

    temp = Info.objects.using('wings').filter(localisation ='Wing_1').order_by('-time')

    time1 = []
    temperature = []

    for dataset in temp :
        time1.append(dataset.time.strftime("%Hh%M"))
        temperature.append(dataset.temp_wing)

    time1 = time1[:60]
    temperature = temperature[:60]
    time1.reverse()
    temperature.reverse()

    context = {
                'time1': time1,
                'temperature': temperature,
    }
    return JsonResponse(context)

И часть скрипта в шаблоне: 

setInterval(function(){
    $.ajax({
        url:'/Dashboard/AutoUpdate',
        success: function(test){
            myChart.data.datasets[0].data = test.temperature;
            myChart.data.labels = test.time1;
            myChart.update();
        }
    });
}, 5000);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...