我无法在Javascript图表上显示数据

Question

I created a webpage where some numbers are displayed in real time. The data is sent from a Python Flask script to my JavaScript frontend using SocketIO.

I'm now trying to show this numbers on a real time chart, and for that i'm using Apexcharts. The problem is that I'm not able to put on the chart what I need. I'm not getting any error at all, the chart won't work or display everything awfully.

As you can see, the data received from my socket is stored on 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

need to wait for socket.on to finish, before drawing the chart.

socket.on is asynchronous, which means all the code after that section,
will run before socket.on is finished, unless by chance socket.on runs really quickly.

try something similar to following setup (see 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);
  }
});