Update chart after every array plot, Highcharts

I think I found a possible work around your code. First of all there are some missconceptions in your current approach:

• There is nothing that gets done after return statement. Yes, as you point out in your comment, after doing return in a function nothing gets done

• In your high charts your data depends on json_array (basically you read the X element of the array), but you actually never update json_array with more information.

Ok... what should I do?

Let's see. First of all, you should make sure you are fetching data in an interval after the first fetch. How to do that:

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);
    // Create the interval before returning, and actually calling the function
    setInterval(function () { requestData() }, 1000);
    return (y);
}

Second, you need that each requestData updates the array you are reading from: Disclaimer, I am using the jsfiddle of your comments to create an easy example

  var json_array = fetch();

  function requestData() {
    var data = [];

    for (var i = 0; i < 500; i++) {
      data.push(Math.random() * 10);
    }

    y = data;

    // Check that json_array have been initialized and after add the data that we fetched in it (so from [1, 2, 3] to... [1, 2, 3, 4, 5, 6]
    if (Array.isArray(json_array)) {
      json_array = json_array.concat(data);
    }
  }

Using your ajax code it should look like

function requestData() {
    $.ajax({
        url: 'random.php',
        async: false,
        success: function (data) {
         /// you can skip this check... I just do it for safety
         if (Array.isArray(json_array)) {
           json_array = json_array.concat(data);
         }
        }
    });
}

And basically that is all, as long as your request is faster than the speed you are reading X in the graph it should work just fine.

I have here the working demo

Extra This is not needed, as in the solution i tried to modify as little as possible your code and mainly point out what was wrong with your approach but I will consider the next improvements to your code:

• Abstract data fetching in a service. Basically you could create a class/prototype that will fetch data once you instanciate it and keep fetching data and adding it
• This class will also check how many indexes of your data you can access currently, and give you the next element.
• Modify your highcharts to use it.

Here is an abstraction of the implementation

class DataFetcher {
constructor() {
   this.currentDataPoint = 0
   this.data = fetch(...)
   this.keepFetching()
}
keepFetching() {
   fetchMoreData().onSuccess((data) => { this.data = data }
}

getNext() {
   if (this.isThereData) {
// Return data point and increase pointer
     dataPoint = this.data[this.currentDataPoint]
     this.currentDataPoint =+ 1
     return dataPoint
   }
// Return nothing because there is no more data points
   return null
}

isThereData() { 
  return this.data.length >= this.currentDataPoint + 1
}

}

Lastly you could abstract the division of this data using a map function:

function fetch() {
    requestData();
    y = y.map(value => value/2);
    console.log(y);
    // Create the interval before returning, and actually calling the function
    setInterval(function () { requestData() }, 1000);
    return (y);
}

// Also the other function
function requestData() {
    var data = [];

    for (var i = 0; i < 500; i++) {
      data.push(Math.random() * 10);
    }

    y = data.map(dataPoint => dataPoint/2);

    // Check that json_array have been initialized and after add the data that we fetched in it (so from [1, 2, 3] to... [1, 2, 3, 4, 5, 6]
    if (Array.isArray(json_array)) {
      json_array = json_array.concat(data);
    }
  }

Hope this help you to refine your solution!