Highcharts多系列动态柱形图更新

Question

I am using highcharts on a project, I am having trouble with the creation of multiple series of data updating dynamically. I'm not sure what I'm doing wrong, below is the sample data and code. Please note the below code is working with single series of data, but what changes I need to make for more than one series?

Sample Data

{"BleedEnthalpy":{"0":1.495308553,"1":0.4441197889,"2":0.8609127688,"3":1.0913122458,"4":1.2085670076},"BypassRatio":{ "0":0.0602932228,"1":0.0020143045,"2":0.1111420462,"3":0.0017957639,"4":0.0665590016}}

Code

Highcharts.chart('other', {
        chart: {
            type: 'column',
            backgroundColor: null,
            animation: Highcharts.svg, // don't animate in old IE
            marginRight: 10,
            events: {
                load: function () {
                    var iter=0;
                    // set up the updating of the chart each second
                    var series = this.series[0];


                    myInterval = setInterval(function() {
                        var len = Object.keys(BleedEnthalpy).length;
            if (iter < len) {
              series.addPoint([(new Date()).getTime(), BleedEnthalpy[iter]], true, true);


              iter++;
            } else {
              clearInterval(myInterval);
            }
          }, 1000);
                }
            }
        },
        title: {
            text: null
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 150
        },
        yAxis: {
            title: {
                text: 'Value'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' +
                    Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                    Highcharts.numberFormat(this.y, 4);
            }
        },
        legend: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
  rangeSelector: {
    enabled: false
  },

  navigator: {
    enabled: false
  },
  scrollbar: {
            enabled: false
        },


        series: [{
            name: 'R 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: BleedEnthalpy
                    });

                }
                return data;}()) }]  });

Answer 1

You have to create another series and then add point to it in the same way as in the first series.

If you have two sets of data:

var BleedEnthalpy = {"0":1.495308553,"1":0.4441197889,"2":0.8609127688,"3":1.0913122458,"4":1.2085670076};

var BypassRatio = { "0":0.0602932228,"1":0.0020143045,"2":0.1111420462,"3":0.0017957639,"4":0.0665590016};

create two series:

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

and then on in time interval callback add points to both series

load: function() {
    var iter = 0;
    // set up the updating of the chart each second
    var series = this.series[0],
        series2 = this.series[1];


    myInterval = setInterval(function() {
      var len = Object.keys(BleedEnthalpy).length;
      var len2 = Object.keys(BypassRatio).length,
          x = new Date().getTime();

      if (iter < len) {
        series.addPoint([x, BleedEnthalpy[iter]], false, true);
        series2.addPoint([x, BypassRatio[iter]], true, true);


        iter++;
      } else {
        clearInterval(myInterval);
      }
    }, 1000);
  }

The second y axis is not necessary but it is useful if the series have different scales.

example: https://jsfiddle.net/jv8a1955/