Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 18.05.2021, 08:27
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,693

Строка 91 странная
data16Array2[i+256] = uint16Array[i+256];

Зачем +256 ,если там всего 256?
Ответить с цитированием
  #3 (permalink)  
Старый 18.05.2021, 09:02
Новичок на форуме
Отправить личное сообщение для DmitryR Посмотреть профиль Найти все сообщения от DmitryR
 
Регистрация: 18.05.2021
Сообщений: 8

voraa,
Вы правы, невнимательность, исправил, но проблема сохраняется
Ответить с цитированием
  #4 (permalink)  
Старый 18.05.2021, 11:52
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,693

Ну значит надо просто отлаживать.
Либо ставить console.log или ставить точки останова в отладчике и смотреть, срабатывает ли onload, что приходит с сервера, срабатывает ли .update(), нет ли ошибок в консоле ...
Ответить с цитированием
  #5 (permalink)  
Старый 18.05.2021, 14:06
Новичок на форуме
Отправить личное сообщение для DmitryR Посмотреть профиль Найти все сообщения от DmitryR
 
Регистрация: 18.05.2021
Сообщений: 8

Да вроде решил вопрос, тут другой момент теперь вылез, почему вторые данные растянуты по графику в два раза больше чем первые? Т.е. выводжу две кривые одного и того же массива, но вторая кривая почему-то растяживается до 8192 значений, котя данные там максимум могут быть 4096
Ответить с цитированием
  #6 (permalink)  
Старый 18.05.2021, 14:06
Новичок на форуме
Отправить личное сообщение для DmitryR Посмотреть профиль Найти все сообщения от DmitryR
 
Регистрация: 18.05.2021
Сообщений: 8

Вот скрин
function Timer2(){
      xhr.open("GET", "content.bin?r=" + Math.random(), true);
      xhr.responseType = "arraybuffer";
      xhr.onload = function (oEvent) {
        var uint16Array = new Uint16Array(this.response);
        var uint16Array1 = new Uint16Array(256);
        var uint16Array2 = new Uint16Array(256);
        for(var i = 0; i < 256; i++)
        {
          uint16Array1[i] = uint16Array[i];
          //uint16Array2[i] = uint16Array[i+256];  
          uint16Array2[i] = uint16Array[i];     
        }
        myChart.data.datasets[0].data = uint16Array1;
        myChart.data.datasets[1].data = uint16Array2;
        myChart.update(); 
        //console.log("Chart update");

        //myChart.data.datasets[0].data = uint16Array;
        //myChart.data.datasets[1].data = uint16Array;
        //myChart.update();             
      }
      xhr.send(null);
      idTimer2 = setTimeout(Timer2, 1000);
    }
Изображения:
Тип файла: jpg 1.jpg (25.0 Кб, 1 просмотров)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
постройка графика из базы данных. xTODx Элементы интерфейса 3 03.06.2014 01:30
Графика и JS - как изменить контрастность? Veterinar Элементы интерфейса 6 01.03.2014 18:01
MultiSerries в Chart. Динамическое изменение типа данных - наследника Ext.data.Model shepard90 ExtJS 1 23.05.2013 01:54
load и динамическое обновление страницы IONEX AJAX и COMET 12 08.07.2012 20:57
Обновление графика Google Charts teandr AJAX и COMET 0 29.06.2010 08:38