Highchart does not render on webpage, Javascript

I have data points in thousands of numbers in my database. So what I want is to display those data points in my webpage Chart using Highcharts.

What I have done so far is that I have fetched the data from the database and parsed them to javascript. but on the next step . I don’t know why my datapoints are not visible in charts.

may be I am doing something wrong. what I want is that I need a 1000 points window. on which 130 points can be drawn in 1 second.

The points are rendering in console log console.log(y) but after the points finished. the console log showing undefined value and keeps counting undefined.

Here is my Code:

  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 is for Y-axis giving the point values.

countArray is for X-axis giving the no. of points

Here is The fiddle in which I replicated the database data as a JS array.

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

Answer

You can use this piece of code to achieve it:

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

Demo:

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