Я не могу показать свои данные на графике Javascript

Я создал веб-страницу, где некоторые номера отображаются в реальном времени. Данные отправляются из сценария Python Flask на мой интерфейс JavaScript с использованием SocketIO.

Теперь я пытаюсь показать эти цифры на графике реального времени, и для этого я использую Apexcharts. Проблема в том, что я не могу надеть на диаграмму то, что мне нужно. Я не получаю никакой ошибки вообще, диаграмма не будет работать или отображать все ужасно.

Как вы можете видеть, данные, полученные из моего сокета, хранятся на numbers_received.

$(document).ready(function() {
  //connect to the socket server.
  var socket = io.connect('http://' + document.domain + ':' + location.port + '/test');
  var numbers_received = [];

  //receive details from server
  socket.on('newnumber', function(msg) {
    console.log("Received" + msg.number);
    //maintain a list of ten numbers
    if (numbers_received.length >= 1) {
      numbers_received.shift()
    }
    numbers_received.push(msg.number);
    numbers_string = '';
    for (var i = 0; i < numbers_received.length; i++) {
      numbers_string = numbers_string + '<p>' + numbers_received[i].toString() + '</p>';
    }
    s
    $('#log').html(numbers_string);
  });

  /*
      // this function will generate output in this format
      // data = [
          [timestamp, 23],
          [timestamp, 33],
          [timestamp, 12]
          ...
      ]
      */
  var lastDate = 0;
  var data = [];

  function getDayWiseTimeSeries(baseval, count, yrange) {
    var i = 0;
    while (i < count) {
      var x = baseval;
      var y = numbers_received;
      data.push({
        x,
        y
      });
      lastDate = baseval
      baseval += 86400000;
      i++;
    }
  }
  getDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 10, {
    min: 10,
    max: 90
  })

  function getNewSeries(baseval, yrange) {
    var newDate = baseval + 86400000;
    lastDate = newDate
    data.push({
      x: newDate,
      y: numbers_received
    })
  }

  function resetData() {
    data = data.slice(data.length - 10, data.length);
  }
  var options = {
    chart: {
      height: 350,
      type: 'line',
      animations: {
        enabled: true,
        easing: 'linear',
        dynamicAnimation: {
          speed: 2000
        }
      },
      toolbar: {
        show: false
      },
      zoom: {
        enabled: false
      }
    },
    dataLabels: {
      enabled: false
    },
    stroke: {
      curve: 'smooth'
    },
    series: [{
      data: data
    }],
    title: {
      text: 'Dynamic Updating Chart',
      align: 'left'
    },
    markers: {
      size: 0
    },
    xaxis: {
      type: 'datetime',
      range: 777600000,
    },
    yaxis: {
      max: 100
    },
    legend: {
      show: false
    },
  }
  var chart = new ApexCharts(
    document.querySelector("#chart"),
    options
  );
  chart.render();
  var dataPointsLength = 10;
  window.setInterval(function() {
    getNewSeries(lastDate, {
      min: 10,
      max: 90
    })
    chart.updateSeries([{
      data: data
    }])
  }, 2000)

  // every 60 seconds, we reset the data 
  window.setInterval(function() {
    resetData()
    chart.updateSeries([{
      data
    }], false, true)
  }, 60000)

});