How to make a event (function) synchronization?

Unfortunately, the example on jsfiddle does not work (difficulties with headers, gnix or something - doesn't matter).

So I had to put an example on the server.
https://tinyurl.com/y8qznpda

Initially, I had 2 static graph. But I needed to make them dynamic. And I did.
But in addition to curve code, I got 2 auto-update. 1 function setInterval to schedule.
I need one function. One event that will update the 2 graphics.
Graph 1 and 2 are identical (the only difference is the name of the variables)
Code a lot (let's all) - but the important code is just 10-15 lines.
The rest of the settings and copy the code above (graph 1, graph 2... copy).
The event, which must be edit-edit (the Event will auto-update)
How to do it?

Code

html
<!-- The container for the graph -->
<div id="GRAPH1_container"></div>
<div id="GRAPH2_container"></div>


javascript
var GRAPH1seriesOptions = [],
GRAPH1seriesCounter = 0,
GRAPH1names = ['CURR1','CURR2'];

createChartGRAPH1 function() {
Highcharts.stockChart('GRAPH1_container', {

//OPTIONS (is not important)
title: {text: 'Chart 1'},
credits: {enabled: false},
rangeSelector: {enabled: false}, //Simplify the chart - turn off the select period at the top left (day-month), right (by date)
navigator: {enabled: false}, //Simplifying graph - disable Navigator (select period below)
navigation: {buttonOptions: {enabled: false}}, //Hide dropdown menu on the right with the option to save graphics in the file
scrollbar: {enabled: false}, //Hide skrolbar below the graph
colors: ['#2b908f','#90ee7e',],

chart: {zoomType: 'x',



//EVENT is AUTO-update (that's it!)
events:
{
load: function () {

var GRAPH1series_0 = this.series[0];
var GRAPH1series_1 = this.series[1];
var GRAPH1series_2 = this.series[2];
var GRAPH1series_3 = this.series[3];

setInterval(function ()
{

$.each(GRAPH1names, function (i, name) {
$.getJSON('actions.php?get_live_data&id_name='+name, function(GRAPH1live_data) {
var live_data=JSON.parse(GRAPH1live_data);

if (i==0) GRAPH1series_0.addPoint([live_data[0],live_data[1]], true, true);
if (i==1) GRAPH1series_1.addPoint([live_data[0],live_data[1]], true, true);
if (i==2) GRAPH1series_2.addPoint([live_data[0],live_data[1]], true, true);
if (i==3) GRAPH1series_3.addPoint([live_data[0],live_data[1]], true, true);

});
});
}, 3000); //Auto update every 3 seconds
}
}
//END EVENT AUTO-update (the end of the important code)


//Below again all settings...
}, //Zoom x-axis
boost: {useGPUTranslations: true}, //Switch acceleration by boost.js
xAxis: {type: 'datetime'}, //Display date and time on the x-axis
yAxis: {},
legend:{layout: 'vertical',align: 'bottom',verticalAlign: 'top',enabled: true},

plotOptions: 
{
series: {
animation: false,
turboThreshold: 1000, //Maximum number of displayed points on the graph. 1000 by default
compare: 'number', //number,percent,string comparison is in percent display values
showInNavigator: true
}
},

tooltip: {pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>',valueDecimals: 4,split: true},
series: GRAPH1seriesOptions
});
}
//END OF SETTINGS




//INITIAL DATA ON the CHART (it does not matter)
$.each(GRAPH1names, function (i, name) {
$.getJSON('actions.php?get_graph_data&graph=GRAPH1&id_name='+name+ '&callback=?', function (data) {
GRAPH1seriesOptions[i] = 
{
name: name,
data: data
};

GRAPH1seriesCounter += 1;
if (GRAPH1seriesCounter === GRAPH1names.length) 
{
createChartGRAPH1();
}

});

});
//END PRIMARY DATA ON THE CHART


//Then just copy the changed variables

//SCHEDULE 2 - A COPY SIMILAR TO THE ABOVE MENTIONED SCHEDULE


var GRAPH2seriesOptions = [],
GRAPH2seriesCounter = 0,
GRAPH2names = ['CURR3','CURR4'];

createChartGRAPH2 function() {
Highcharts.stockChart('GRAPH2_container', {

//SETTINGS
title: {text: 'Chart 2'},
credits: {enabled: false},
rangeSelector: {enabled: false}, //Simplify the chart - turn off the select period at the top left (day-month), right (by date)
navigator: {enabled: false}, //Simplifying graph - disable Navigator (select period below)
navigation: {buttonOptions: {enabled: false}}, //Hide dropdown menu on the right with the option to save graphics in the file
scrollbar: {enabled: false}, //Hide skrolbar below the graph
colors: ['#C86938','#C828B0',],

chart: {zoomType: 'x',





//EVENT IS AUTO-UPDATE
events:
{
load: function () {

var GRAPH1series_0 = this.series[0];
var GRAPH1series_1 = this.series[1];
var GRAPH1series_2 = this.series[2];
var GRAPH1series_3 = this.series[3];

setInterval(function ()
{

$.each(GRAPH1names, function (i, name) {
$.getJSON('actions.php?get_live_data&id_name='+name, function(GRAPH1live_data) {
var live_data=JSON.parse(GRAPH1live_data);

if (i==0) GRAPH1series_0.addPoint([live_data[0],live_data[1]], true, true);
if (i==1) GRAPH1series_1.addPoint([live_data[0],live_data[1]], true, true);
if (i==2) GRAPH1series_2.addPoint([live_data[0],live_data[1]], true, true);
if (i==3) GRAPH1series_3.addPoint([live_data[0],live_data[1]], true, true);

});
});
}, 3000); //Auto update every 3 seconds
}
}
//END EVENT AUTO-UPDATE


}, //Zoom x-axis
boost: {useGPUTranslations: true}, //Switch acceleration by boost.js
xAxis: {type: 'datetime'}, //Display date and time on the x-axis
yAxis: {},
legend:{layout: 'vertical',align: 'bottom',verticalAlign: 'top',enabled: true},


plotOptions: 
{
series: {
animation: false,
turboThreshold: 1000, //Maximum number of displayed points on the graph. 1000 by default
compare: 'number', //number,percent,string comparison is in percent display values
showInNavigator: true
}
},

tooltip: {pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>',valueDecimals: 4,split: true},
series: GRAPH2seriesOptions
});
}
//END OF SETTINGS



//INITIAL DATA ON THE CHART
$.each(GRAPH2names, function (i, name) {
$.getJSON('actions.php?get_graph_data&graph=GRAPH2&id_name='+name+ '&callback=?', function (data) {
GRAPH2seriesOptions[i] = 
{
name: name,
data: data
};

GRAPH2seriesCounter += 1;
if (GRAPH2seriesCounter === GRAPH2names.length) 
{
createChartGRAPH2();
}

});

});
//END PRIMARY DATA ON THE CHART
March 12th 20 at 08:03
1 answer
March 12th 20 at 08:05
You yourself twice prescribed setInterval.

Remove one of them.
And actually, a lot of repetitive code.
Two charts - 2 events. Write twice.
Need to write code in one setInterval. But setInterval is in unit events (a certain place in the code where you perform the events in the HIGHCHARTS component).

I can't stand
......
$.each(GRAPH1names, function (i, name) {
$.getJSON('actions.php?get_live_data&id_name='+name, function(GRAPH1live_data) {
var live_data=JSON.parse(GRAPH1live_data);
if (i==0) GRAPH1series_0.addPoint([live_data[0],live_data[1]], true, true);
.............


beyond
$.each(GRAPH1names, function (i, name) {
The scope of variables or something. Simply put the javascript does not understand what is it
GRAPH1series_0.addPoint

That's the essence of the issue. How to make all of the code blocks
setInterval(function ()
{

which two in one unit? - jayden.Leuschke commented on March 12th 20 at 08:08
@jayden.Leuschke, setInterval(myFunction, 3000)

But I repeat: you have this setInterval twice and the function will run each of them. Don't do that. - Stephanie.Goodw commented on March 12th 20 at 08:11
But I repeat: you have this setInterval twice and the function will run each of them.

I know.
So the real question is "how to make one event (function) synchronization?" One.
I.e. something like this
//Code outside of function blocks createChartGRAPH1() {


setInterval(function ()
{

$.each(GRAPH1names, function (i, name) 
{
$.getJSON('actions.php?get_live_data&id_name='+name, function(GRAPH1live_data) {
var live_data=JSON.parse(GRAPH1live_data);
if (i==0) GRAPH1series_0.addPoint([live_data[0],live_data[1]], true, true);
//...........
});
});


$.each(GRAPH2names, function (i, name) 
{
$.getJSON('actions.php?get_live_data&id_name='+name, function(GRAPH1live_data) {
var live_data=JSON.parse(GRAPH2live_data);
if (i==0) GRAPH2series_0.addPoint([live_data[0],live_data[1]], true, true);
//...........
});
});


}, 3000); //Auto update every 3 seconds


Yes, code duplication, Yes 2 call getJSON (the idea need to make one) - while not the point.
How do I put the code outside the function createChartGRAPH1?
There is, of course, are not visible variables.

Asked the question here
https://forum.highcharts.com/topic41048/?sid=a20ed...
Recommend something like this
https://jsfiddle.net/gh/get/library/pure/highchart...
But, unfortunately, I do not understand how can I alter my code ( - jayden.Leuschke commented on March 12th 20 at 08:14
@jayden.Leuschke, just take and make. You do not stand, as far as I can see those pieces of code that you show.

- Stephanie.Goodw commented on March 12th 20 at 08:17
Stephanie.Goodw - it is impossible so simply to take and make (s) :)
There all tied to the events of highstock (load: function ....$.each(GRAPH1names....) the scope of variables and other things. The need to rebuild, to reconcile all of this.
Thanks, but this is probably the question is not for the forum. Go to freelancing. - jayden.Leuschke commented on March 12th 20 at 08:20
@jayden.Leuschke, I see you have in your code, load: function(){} ...

INSIDE this function a regular setInterval
You just want to make? What's stopping you to do it? - Stephanie.Goodw commented on March 12th 20 at 08:23
@Stephanie.Goodw,
What's stopping you to do it?

For example
GRAPH1series_0.addPoint
Outside the block
Highcharts.stockChart('GRAPH1_container', {
This method is not.
And I have also 2 unit GRAPH1_container and GRAPH2_container.

In order to fully clarify the situation, wrote something of type TK.
https://tinyurl.com/yco9qq8z

You can me to help? If you find this simple and cost-effective time.
I myself doubt it will due to the low level of knowledge of JS. The third day I suffer.
Prompt or even how to solve for "beer"? (the number of bottles of beer to be discussed). - jayden.Leuschke commented on March 12th 20 at 08:26
@jayden.Leuschke, I'm off the phone, the code is inconvenient to write.

But: https://learn.javascript.ru/bind - Stephanie.Goodw commented on March 12th 20 at 08:29
@Stephanie.Goodw,
https://learn.javascript.ru/bind

The hint is clear. Thank you.

@Stephanie.Goodw,
I'm off the phone, the code is inconvenient to write

Okay, I'll wait until tomorrow. If you suddenly decide to solve this puzzle. I don't need right now.
Not the same exam ) With you, with me "beer". )

Well, if there is something difficult for a long time implemented or just not interested - so I will continue to gnaw granite of JS.
It is not my specialty. Somewhere near, but not yet mine. - jayden.Leuschke commented on March 12th 20 at 08:32
@jayden.Leuschke, if relevant - write in the telegram. - Stephanie.Goodw commented on March 12th 20 at 08:35

Find more questions by tags HighchartsjQueryJavaScript