Highcharts (highstock) how to correctly dynamically update multiple series of charts?

Question

JavaScript

I use the Highcharts library (highstock.js)
I follow the examples from the official documentation. The links are all the code, but I copied the main code here.
Multiple series on a chart
https://www.highcharts.com/stock/demo/compare
Main, code in multiple series on a chart

$.each(names, function (i, name) {
    $.getJSON('https://www.highcharts.com/samples/data/' + name.toLowerCase() + '-c.json',    function (data) {
       seriesOptions[i] = {
            name: name,
            data: data
        };
        seriesCounter += 1;
        if (seriesCounter === names.length) {
            createChart();
        }

Dynamic chart update
https://www.highcharts.com/stock/demo/dynamic-update
Main code in dynamic chart update

events: {
            load: function () {
                var series = this.series[0];
                setInterval(function () {
                    var x = (new Date()).getTime(), // current time
                        y = Math.round(Math.random() * 100);
                    series.addPoint([x, y], true, true);
                }, 1000);

I need to update multiple series dynamically.
I wrote the code and it works, but not always correctly. It definitely has bugs, besides code duplication.
My code to dynamically update multiple series of charts.
I wrote comments where there are doubts or it may not work correctly.

var GRAPH1seriesOptions = [],
GRAPH1seriesCounter = 0,
GRAPH1names = ['one_curr','two_curr']; //Сейчас всего 2 значения

function createChartGRAPH1() {
Highcharts.stockChart('GRAPH1_container', {
title: {text: 'График 1'},
colors: ['#2b908f','#90ee7e','#f45b5b',],

chart: 
{zoomType: 'x',
events:
{
load: function () {
//Сейчас достаточно 2х переменных. Но выше может быть и 3 и 1 и все 5. Поэтому пришлось подготовиться на все случаи (
var GRAPH1series_0 = this.series[0];
var GRAPH1series_1 = this.series[1];
var GRAPH1series_2 = this.series[2];
var GRAPH1series_3 = this.series[3];
var GRAPH1series_4 = this.series[4];
var GRAPH1series_5 = this.series[5];


setInterval(function ()
{

$.each(GRAPH1names, function (i, name) {
current_time=(new Date()).getTime()[phone]; // current time

$.getJSON('actions.php?get_live_data&currency_id_name='+name, function(GRAPH1live_data) {

//Сейчас достаточно 2х переменных. Но выше может быть и 3 и 1 и все 5. Поэтому пришлось подготовиться на все случаи (
if (i==0) GRAPH1series_0.addPoint([current_time, GRAPH1live_data], true, true);
if (i==1) GRAPH1series_1.addPoint([current_time, GRAPH1live_data], true, true);
if (i==2) GRAPH1series_2.addPoint([current_time, GRAPH1live_data], true, true);
if (i==3) GRAPH1series_3.addPoint([current_time, GRAPH1live_data], true, true);
if (i==4) GRAPH1series_4.addPoint([current_time, GRAPH1live_data], true, true);
if (i==5) GRAPH1series_5.addPoint([current_time, GRAPH1live_data], true, true);


});
});
}, 10000); //Время автообновления 10 секунд
}
}
},

Of course, my code above is not only not beautiful, but also most likely contains errors in logic.
How to correctly dynamically update several series of charts?

Answer 1

Instead of creating separate variables for each set of data, simply iterate over the series array with forEach. Whether it is necessary to redraw the graph as soon as a new point is added to any of the data sets - I'm not sure. Personally, I would wait for new data for all sets to be received and only then do a redraw. Of course, if you want, you can redraw every time you receive new data .
You should also pay attention to your choice to use setInterval to provide a constant update - what if one of the requests takes much longer than you expect? Won't it turn out that newer data will be added before the old ones? Might be worth doing this: request, upon receipt of the response - setTimeout for the next request.
As for
- This is a conversation about nothing. About zero information. You should have told how this incorrectness manifests itself.