Графики Apex показывают только последнее значение django в отличие от последних 12 результатов

Я пытаюсь заставить Apex Charts регистрировать значения из моего представления django, но я получаю только самое последнее значение, а не 12 последних значений. Возможно, мне нужно сделать что-то в javascript, чтобы заставить это работать (например, map), но я пытаюсь придумать, что попробовать дальше...

Моя модель Django:

from django.db import models
from datetime import datetime

class Telemetry(models.Model):
    building_name = models.CharField(max_length=200)
    space_type = models.CharField(max_length=200)
    reference_point = models.CharField(max_length=100,
                                       help_text='eg: ASP')
    temperature_value = models.DecimalField(max_digits = 5,
                         decimal_places = 2)
    people_sensor_value = models.IntegerField()
    humidity_value = models.DecimalField(max_digits = 5,
                         decimal_places = 2)
    co2_value = models.DecimalField(max_digits = 5,
                         decimal_places = 2)
    voc_value = models.DecimalField(max_digits = 5,
                         decimal_places = 2)
    time_stamp = models.DateTimeField(default=datetime.now, blank=True)
    
    class Meta:
        verbose_name = 'Console Value'
        verbose_name_plural = 'Console Values'
    
    def __str__(self):
        return self.space_type

Мой Django View:

def chart_view(request):
    if not request.user.is_authenticated:
        return HttpResponseRedirect('/')
    else:
        console_points = Telemetry.objects.all()[:12]
        context = {
            'console_points': console_points
        }

        return render(request, 'charts/line_charts.html', context)

Мой HTML-шаблон:

{% load static %}
{% load humanize %}

{% block content %}

{% for console_point in console_points %}
  {{ console_point.voc_value }}
  {{ console_point.time_stamp|naturaltime }}
{% endfor %}

  <section class="row gap-1 justify-center">
    <div class="col-1-xs">
      <div class="card bg-white">
        <div class="card-body">
          <h3>Office Temperature</h3>
          <p>Split by sector in the last 12 hours</p>
          <div class="line-chart mt-2"></div>
        </div>  
      </div>
    </div>
  </section>



{% block scripts %}
  <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>


  <script>
    {% for console_point in console_points %}
    
    var lab = {{ console_point.voc_value }}
    var timestamp = '{{ console_point.time_stamp|naturaltime }}'
    
    console.log(lab)
    console.log(timestamp)
    
    var options = {
      
      series: [
      //{
      //  name: "Lab",
      //  data: [24.2, 23.8, 23.7, 22.4, 23.4, 22.9, 21.7, 20.1, 19.5, 18.9, 18.5, 17.9]
      //},
      //{
      //  name: "Deployment",
      //  data: [23.2, 22.3, 21.3, 20.4, 20.1, 19.7, 18.5, 18.3, 17.2, 17.9, 17.5, 17.1]
      //},
      {
        name: "Lab",
        data: [lab]
      }

    ],
      chart: {
      height: 350,
      type: 'line',
      zoom: {
        enabled: false
      }
    },
    dataLabels: {
      enabled: false
    },
    stroke: {
      curve: 'straight'
    },
    //title: {
    //  text: 'Space Temperature in Last 12 Hrs',
    //  align: 'left'
    //},
    grid: {
      row: {
        colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
        opacity: 0.5
      },
    },
    xaxis: {
      categories: [timestamp],
    },
    yaxis: {
      title: {
        text: 'Temperature °C'
      }
    },
    };
    {% endfor %}
    var chart = new ApexCharts(document.querySelector(".line-chart"), options);
    chart.render();
  
  
</script>
{% endblock %}

{% endblock %}

Вернуться на верх