Показать сообщение отдельно
  #1 (permalink)  
Старый 18.05.2021, 08:12
Новичок на форуме
Отправить личное сообщение для DmitryR Посмотреть профиль Найти все сообщения от DmitryR
 
Регистрация: 18.05.2021
Сообщений: 8

Динамическое обновление данных графика Chart js
Есть HTTP сервер, который передает данные клиенту по GET запросу. Принятые данные обрабатываются и из них строится линейный график с двумя кривыми. Принимаю 512 16 битных чисел, разбиваю на 2 массива по 256 чисел и хочу построить из этого график. Обновление данных идет раз в секунду (заведено на таймер).
Но не получается добиться чтобы график обновлялся. В чем может быть проблема?
Вот часть кода
var xhr;
    var myChart;
    var idTimer2;

    function onload(){
      xhr = new(XMLHttpRequest);

      var ctx = document.getElementById("myChart");
      var data16Array = new Uint16Array(512);
      var data16Array1 = new Uint16Array(256);
      var data16Array2 = new Uint16Array(256);

      myChart = new Chart(ctx, {
        type: 'line',
        data: {
          labels: ["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
                  "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
                  "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
                  "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
                  "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
                  "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
                  "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
                  "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
                  "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
                  "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
                  "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
                  "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
                  "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
                  "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
                  "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
                  "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
          datasets: [
          {
            label: 'Side1',
            data: data16Array1,
            backgroundColor: 'rgba(150, 150, 0, 0.0)',
            borderColor: 'rgba(51, 255, 85, 1)',
            borderWidth: 2,
            pointStyle: 'line',
            pointRadius: 0
          },
          {
            label: 'Side2',
            data: data16Array2,
            backgroundColor: 'rgba(150, 150, 0, 0.0)',
            borderColor: 'rgba(0, 119, 179, 1)',
            borderWidth: 2,
            pointStyle: 'line',
            pointRadius: 0
          }
          ]
        },
        options: {
          tooltips: {
            enabled: false
          },
          animation: {
	          duration: 0
          },
          responsive: true,
          scales: {
            xAxes: {                          
              min: 0,
	            max: 512,
              stacked: true,
              ticks:{
	              stepSize : 64
              }
            },
            yAxes: {                            
	            min: 0,
              max: 4096,
              stacked: true,
	            ticks:{
                stepSize : 256
              }
            }
          }
        } 
      });            
    }

    function Timer2(){
      xhr.open("GET", "content.bin?r=" + Math.random(), true);
      xhr.responseType = "arraybuffer";
      xhr.onload = function (oEvent) {
          var uint16Array = new Uint16Array(this.response);
          for(var i = 0; i < 256; i++)
          {
            data16Array1[i] = uint16Array[i];
            data16Array2[i+256] = uint16Array[i+256];
          }
          myChart.data.datasets[0].data = data16Array1;
          myChart.data.datasets[1].data = data16Array2;

          myChart.update();             
      }
      xhr.send(null);
      idTimer2 = setTimeout(Timer2, 1000);
    }
    function startchart(){
      document.getElementById('butchart').innerHTML = '&nbsp;&nbsp;&nbsp;&nbsp;<input class = "butcolor" type="button" style="color: #ffffff; background-color: #000000;" onclick="stopchart()" value="Stop Chart"/>';
      Timer2();
    }
Изображения:
Тип файла: jpg 1.jpg (4.1 Кб, 2 просмотров)
Ответить с цитированием