Обновлять график после каждого графика массива, Highcharts

Question

Я пытаюсь загрузить данные со стороны сервера и поочередно отображать их в Highcharts.

Но прежде чем отобразить их на Highchart, я выполняю некоторую обработку данных и затем отображаю их вHighcharts.

Я использую AJAX, чтобы я мог получать данные каждый раз, не обновляя страницу и не перезагружая диаграмму.

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

Здесь у меня есть файл random.php, который я использую дляполучить данные:

header("Content-type: text/json");

$data = [];
for($i=0; $i<500; $i++)
{
    $data[] = rand(0,10);  
}

$into_mysql = json_encode($data);

echo $into_mysql;

Теперь я извлекаю данные на диаграмме на другой странице:

var chart;
// Prototype to Request Data using `AJAX`
function requestData() {
    $.ajax({
        url: 'random.php',
        async: false,
        success: function (data) {
            y = data;
            console.log(y);
            return (y);
        }
    });
}


// Fetch the data from the `requestData` and process it.
function fetch() {
    requestData();
    var divisor = 2;
    var count = 0;
    for (var i = 0, length = y.length; i < length; i++) {
        y[i] /= divisor;
    }
    console.log(y);
    return (y);
    setInterval(function () { requestData }, 1000);
}

var json_array = fetch();

var i = 0;
function next() {

    return json_array[i++];
    // 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;
                setInterval(function () {
                    var x = (new Date()).getTime(), // current time
                        y = next();
                    console.log(y);
                    series.addPoint([x, y], false, true);
                    chart.redraw(false);
                }, 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: (function () {
            // generate an array of random data
            var data = [],
                time = (new Date()).getTime(),
                i;

            for (i = -1000; i <= 0; i += 1) {
                data.push([
                    time + i * 10,
                    null
                ]);
            }
            return data;
        }())
    }]
});   

Итак, мне нужно визуализировать данныеодин за другим, не нарушая его. когда закончится набор данных из random.php. следующие данные должны начаться в продолжение этого.

Обновление:

Рассмотрим сценарий, в котором массив из 500 данных создается каждые несколько секунд. то, что я хочу, это показать точки массива в одном старшем графике один за другим. но отображается только первый набор данных массива, а остальные данные массива не отображаются.