Динамическое обновление данных графика 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();
    }

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

Зачем +256 ,если там всего 256?

voraa,
Вы правы, невнимательность, исправил, но проблема сохраняется

Ну значит надо просто отлаживать.
Либо ставить console.log или ставить точки останова в отладчике и смотреть, срабатывает ли onload, что приходит с сервера, срабатывает ли .update(), нет ли ошибок в консоле ...

Да вроде решил вопрос, тут другой момент теперь вылез, почему вторые данные растянуты по графику в два раза больше чем первые? Т.е. выводжу две кривые одного и того же массива, но вторая кривая почему-то растяживается до 8192 значений, котя данные там максимум могут быть 4096

Вот скрин

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);
    }