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

Question

Я создал веб-страницу, где некоторые цифры отображаются в режиме реального времени. Данные отправляются из скрипта 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)

});

Answer 1

Нужно ждать socket.on закончить, прежде чем рисовать график.

socket.on является асинхронным, что означает весь код после этого раздела,
будет работать раньше socket.on закончено, если случайно socket.on работает очень быстро

попробуйте что-то похожее на следующую настройку (см. drawChart)...

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

  //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>';
    }
    $('#log').html(numbers_string);
    drawChart();
  });

  function drawChart() {
    getDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 10, {
      min: 10,
      max: 90
    })

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

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

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