Динамическое обновление графиков в режиме реального времени - PullRequest
Новая
       64

Динамическое обновление графиков в режиме реального времени

0 голосов
/ 18 марта 2020

Я хочу получить данные из моей базы данных (, где данные обновляются каждые 10 секунд ). Затем данные должны быть добавлены в мой график. Проблема в том, что я не могу добраться до графика внутри своей функции успеха. Основная цель, которую я пытаюсь достичь, - динамическое обновление графика в режиме реального времени. Таким образом, если значение изменяется в моей базе данных, на диаграмме должно отображаться мое новое значение .

Вот код для длительного опроса: 

var isActive = true;
$(document).ready(function(){
  pollServer();
})

function pollServer(){
  if(isActive)
  {
    window.setTimeout(function(){
      $.ajax({
        url: "display.php",
        method: "POST",
        success: function (result){
          for(var i = 0; i < result.length; i++){
              var latestLabel = result[i].TimeStamp;
              var latestData = result[i].Temperatuur;


              chart.data.labels.push(latestLabel);
              chart.data.datasets.forEach((dataset) => {
              dataset.data.push(latestData);
              });

              chart.update();
          }
          pollServer();
        },
        error: function(){
          pollServer();
        }
      })
    }, 5000)
  }
}
</script>

Код моей диаграммы: 

  $.ajax({
            url:"display.php",
            type:"POST",
            success: function(data){
            for(var i = 0; i < data.length; i++ ){
                console.log(data[i].Sensornaam);
                var $mydiv = $("#" + data[i].SensorID);

              if($mydiv.length == false){
                $("#chart-container").append("<canvas id="+data[i].SensorID+"></canvas>");

              }
              else{
                $mydiv.remove();
                $("#chart-container").append("<canvas id="+data[i].SensorID+"></canvas>");
              }
            }

            for (var i = 0; i < data.length; i++) {
              var ctx = $("#" + data[i].SensorID);
                switch(data[i].Settings){
                    case "Line":
                          var chart = new Chart(ctx, {
                            type: 'line',
                            data: {
                              labels: [],
                              datasets: [{
                                label: 'My Sensor',
                                backgroundColor: 'rgb(0, 99, 132)',
                                borderColor: 'rgb(0, 99, 132)',
                                data: [],
                              }]
                            },
                            options: {}
                          });

                          break;
                    case "Bar":
                        var chartdata = {
                            labels: [],
                            datasets: [{
                              label: 'Sensor Temperatuur',
                              backgroundColor: 'rgba(200, 200, 200, 0.75)',
                              borderColor: 'rgba(200, 200, 200, 0.75)',
                              hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                              hoverBorderColor: 'rgba(200, 200, 200, 1)',
                              data: []
                            }]
                          };


                          myChart = new Chart(ctx, {
                            type: 'bar',
                            data: chartdata,
                            options: {
                              scales: {
                                yAxes: [{
                                  ticks: {
                                    beginAtZero: true
                                  }
                                }]
                              }
                            }
                          });

                          break;
                        }

                      }

                    },
                    error:function(){

                    }
              })
});

Если бы я смог добраться до графика изнутри Ajax, я бы смог обновить свой график, проблема в том, что я не могу оттуда добраться до него. Есть ли другой метод динамического обновления моей диаграммы с использованием данных из базы данных, который обновляется каждые 10 секунд с использованием чего-то вроде метода длинных опросов?

...