Создание графика с помощью Apexchart в цикле for - Django

У меня есть список в цикле, и я хочу построить его график в цикле. Но это выглядит как показано ниже. Графики накладываются друг на друга. Но я хочу, чтобы они отображались по одному. Причина в том, что отправленные данные постоянно добавляются в индекс 0. Я оставляю свои коды ниже.

введите описание изображения здесь

views.py

   for i in devices:
        query = client.query("select * from table where x='"+ str(i) +"' and time > now() -7d")
        series = query._get_series()
        values = series[0]['values']
        
        for x in values:
            dto = datetime.strptime(x[0], "%Y-%m-%dT%H:%M:%SZ")
            dto += timedelta(hours=3)
            trdateTime = dto.strftime("%d/%m/%Y-%H:%M:%S")
            milisec = dto.timestamp() * 1000 + 10800000
            
            tempVal = int(x[5][2:5])/10
            humVal = int(x[5][5:8])/10
            
            tempList.append(tempVal)
            humList.append(humVal)
            timeList.append(trdateTime)

            dataTemp = [milisec, tempVal]
            dataHum = [milisec, humVal]

            tempChartDatas.append(dataTemp)
            humChartDatas.append(dataHum)
        
        tempChartDatas2.append(tempChartDatas[:])
        tempChartDatas2.append(",")
        humChartDatas2.append(humChartDatas[:])
        tempList2.append(tempList[::-1])
        humList2.append(humList[::-1])      
        timeList2.append(timeList[::-1])      
    

    context['logListT'] = zip_longest(timeList2, tempList2)
    context['logListH'] = zip_longest(timeList2, humList2)
    context["all"] = zip_longest(tempList2, humList2, tempChartDatas2, humChartDatas2)
    return render(request, 'index.html', context )

index.html --> это график

  {% for d,v in logListT %}
  <div class="row" style="border-bottom: 2px #293450  solid; padding-bottom: 25px; margin-top:2em;">
    <div class="col-6">
      <div id="chart-area{{ forloop.counter }}"></div>
    </div>
    <div class="col-6">
      <div class="row" style="justify-content:space-evenly;">
        <div id="chart3{{ forloop.counter }}"></div>

        <div id="chart4{{ forloop.counter }}"></div>
      </div>
      <div class="row" style="justify-content:center;">
        <div class="tableScroll">
          <table class="table">
            <thead style="background-color:#0b1827; color:#4f5d82;">
              <tr>
                <th>Date</th>
                <th>Value</th>
              </tr>
            </thead>
            <tbody style="color:white;">
                <tr>
                  <td>{{d}}</td>
                  <td>{{v}}</td>
                </tr>
              </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  {% endfor %}

script

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