Обновление диаграммы. js не работает после получения новых данных из базы данных с ajax - PullRequest
Новая
       22

Обновление диаграммы. js не работает после получения новых данных из базы данных с ajax

0 голосов
/ 18 апреля 2020

Это мой скрипт внутри скрипта, где я инициализирую графики

JavaScript

$(document).ready( () => {
    setInterval( () => {
    var sensorUpdatedData = new XMLHttpRequest();
    sensorUpdatedData.onreadystatechange = () => {
      if(sensorUpdatedData.readyState === 4) {
        if(sensorUpdatedData.status === 200) {
          console.log("ready");           
          var Data = JSON.parse(sensorUpdatedData.responseText);
          console.log(Data);

          valueTemp = Data.temperature;
          valueHum = Data.humidity;
          valueSmoke = Data.smoke;
          reading_time = Data.reading_time;
          reading_time_hour = Data.reading_time_hour;



          myChartTemp.update();
          myChartHum.update();
          myChartSmoke.update();
          myChartData.update();

        } else {
          alert('Error Code: ' +  sensorUpdatedData.status);
          alert('Error Message: ' + sensorUpdatedData.statusText);
        }
      }
    }
      sensorUpdatedData.open('POST', 'data.php', true);
      sensorUpdatedData.send();
    }, 5000);
  });

Все значения обновляются корректно (я тестировал с некоторыми console.log)

Вот как я создал одну из диаграмм: 

var ctxTempChart = document.getElementById("chartLineTemp").getContext("2d");

    var gradientStrokeTempChart = ctxTempChart.createLinearGradient(0, 230, 0, 50);

    gradientStrokeTempChart.addColorStop(1, 'rgba(29,140,248,0.2)');
    gradientStrokeTempChart.addColorStop(0.4, 'rgba(29,140,248,0.0)');
    gradientStrokeTempChart.addColorStop(0, 'rgba(29,140,248,0)'); //blue colors

    var dataTemp = {
      labels: reading_time_hour,
      datasets: [{
        label: "Temperature",
        fill: true,
        backgroundColor: gradientStrokeTempChart,
        borderColor: '#1f8ef1',
        borderWidth: 2,
        borderDash: [],
        borderDashOffset: 0.0,
        pointBackgroundColor: '#1f8ef1',
        pointBorderColor: 'rgba(255,255,255,0)',
        pointHoverBackgroundColor: '#1f8ef1',
        pointBorderWidth: 20,
        pointHoverRadius: 4,
        pointHoverBorderWidth: 15,
        pointRadius: 4,
        data: valueTemp,
      }]
    };

    var myChartTemp = new Chart(ctxTempChart, {
      type: 'line',
      data: dataTemp,
      options: gradientBarChartConfigurationTempSmall

    });

HTML

 <canvas id="chartLineTemp"></canvas>

Кажется, все работают нормально, но я не знаю, как отобразить обновленные данные. VavalueTemp, valueHum ... объявляются глобально, в начале скрипта

ОБНОВЛЕНИЕ Если я добавлю это: 

myChartTemp.data.labels = reading_time_hour; 
myChartTemp.data.datasets[0].data = valueTemp; 
window.myChartTemp.update();

Я получил это (с документом также): Невозможно прочитать свойство 'update' из неопределенного в XMLHttpRequest.sensorUpdatedData.onreadystatechange

И если я go, как это: 

myChartTemp.data.labels = reading_time_hour;
myChartTemp.data.datasets[0].data = valueTemp;
myChartTemp.update();

(без окна или документ впереди) я получил ths: TypeError: Object.defineProperty вызывается для необъекта

Ответы [ 2 ]

0 голосов
/ 21 апреля 2020

Проблема заключалась в том, что я передавал объект, и он ожидал массив. My var Data - это один JSON объект, содержащий несколько JSON объектов. После того, как я применил valueTemp = JSON.parse(Data.temperature);, он возвращает массив значений температуры, именно то, что мне нужно.

0 голосов
/ 18 апреля 2020

Вы пытались получить доступ к функции обновления как объект DOM?

window.myChartTemp.update(); или document.myChartTemp.update();

...