Динамически обновлять две серии на одном графике с помощью HighCharts

Question

var myChart = Highcharts.chart('containerX', {

        chart: {
          type: 'spline',
          //animation: Highcharts.svg, // don't animate in old IE
          marginRight: 10,
          events: {
              load: function () {

                  var socket = io.connect('http://' + document.domain + ':' + location.port + '/test');
                  var series = this.series[0];


                 socket.on('newnumber', function(msg) {

                        var x = (new Date()).getTime() // current time
                        var y = parseFloat(msg.number)

                        console.log(msg.number)

                        series.addPoint([x, y], true, true);



                  });

                  socket.on('newnumber2', function(msg2) {

                         var x = (new Date()).getTime() // current time
                         var y = parseFloat(msg2.number2)

                         console.log(msg2.number2)

                         series.addPoint([x, y], true, true);



                   });

              }
          },
},

...

series: [{
    name: 'Random data',
    data: (function () {
        // generate an array of random data
        var data = [],
            time = (new Date()).getTime(),
            i;

        for (i = -19; i <= 0; i += 1) {
            data.push({
                x: time + i * 1000,
                y: Math.random()
            });
        }
        return data;
    }())

}]

В коде я получаю два разных значения по flask -socketio одновременно. msg.number и msg.number2

Я могу правильно отобразить значение на графике только с одной серией, например, msg.number, но я хочу добавить еще одну серию на график, например, msg.number2

Как мне изменить код для достижения этой цели?

Answer 1

Вам необходимо добавить еще одну серию в исходную конфигурацию:

series: [{
  ...
}, {
  ...
}]

И правильно сослаться на нее в событии load:

events: {
  load: function() {
    ...
    var series1 = this.series[0];
    var series2 = this.series[1];

    socket.on('newnumber', function(msg) {
      ...
      series1.addPoint([x, y], true, true);
    });

    socket.on('newnumber2', function(msg2) {
      ...
      series2.addPoint([x, y], true, true);
    });
  }
}

---

Демонстрационная версия: http://jsfiddle.net/BlackLabel/6m4e8x0y/4933/