Highchart не отображается на веб-странице, Javascript

Question

У меня есть точки данных в тысячах чисел в моей базе данных. Итак, я хочу, чтобы эти точки данных отображались на моей диаграмме веб-страницы с использованием Highcharts.

На данный момент я получил данные из базы данных и проанализировал их в javascript. но на следующем шаге. Я не знаю, почему мои точки данных не видны на диаграммах.

Возможно, я что-то делаю не так. то, что я хочу, это то, что мне нужно окно 1000 очков. на котором 130 точек могут быть нарисованы за 1 секунду.

Точки отображаются в консольном журнале console.log(y), но после того, как точки закончены. журнал консоли показывает значение undefined и продолжает считать undefined.

Вот мой Код:

  var x =[] ;
    var countno = [] ;
     for(j=0 ;j<2000 ;j++)
      {
        x.push(Math.random());
        countno.push(j);
      }
        var values = x;
        var number = countno ;


        var numArray = values;

        console.log(numArray) ;

        var i = 0;

function next() {  

  return numArray[i++];
}

        var countArray = number;
        console.log(countArray) ;

function countval() {  

  return countArray[i++];

}

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

                // set up the updating of the chart each second
                var series = this.series[0],
                    chart = this;
                var count = 0 ;
                var draw = setInterval(function() {
                         x = countval(); // current time
                        y =next();
                        console.log(y) ;
                         if (i == numArray.length && i == countArray.length) {
                            clearInterval(draw);
                            return;
                        }
                        chart.redraw(false);
                    series.addPoint([x, y], false, true);

                }, 1000/130);


            }
        }
    },

    time: {
        useUTC: false
    },

    title: {
        text: 'ECG Graph Plot From MySQl Data'
    },
    xAxis: {
        type: 'datetime',
        labels: {
            enabled: false
        },
        tickPixelInterval: 150
    },
    yAxis: {
       // max: 1.5,
       // min: -1.5,
        title: {
            text: 'Value'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        headerFormat: '<b>{series.name}</b><br/>',
        pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}'
    },
    legend: {
        enabled: false
    },
    exporting: {
        enabled: false
    },
    series: [{
        animation: false,
        name: 'ECG Graph Plot From MySQl Data',
         dataGrouping: {
        enabled: false
    },
        data:[]
    }]
});

numArray для оси Y, задающей значения точек.

countArray дляОсь X дает нет. из точек

Вот скрипка, в которой я реплицировал данные базы данных в виде массива JS.

https://jsfiddle.net/abnitchauhan/mj8wa67x/

Answer 1

Вы можете использовать этот кусок кода для достижения этого:

chart: {
  events: {
    load: function() {

      // set up the updating of the chart each second
      var series = this.series[0],
        chart = this;
      var count = 0;
      var draw = setInterval(function() {
        x = countval(); // current time
        y = next();

        if (i == numArray.length && i == countArray.length) {
          clearInterval(draw);
          return;
        }

        if (x > 130) {
          series.addPoint([x, y], true, true, false);
        } else {
          series.addPoint([x, y], true, false, false);
        }
      }, 100);
    }
  }
}

Демо:

• https://jsfiddle.net/BlackLabel/6pkmo4b0/