E
E
Evgeny Ivanov2018-10-10 00:25:29
JavaScript
Evgeny Ivanov, 2018-10-10 00:25:29

How to make one sync event (function)?

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

Therefore it was necessary to lay out an example on the server.
https://tinyurl.com/y8qznpda

Initially I had 2 static charts. But I needed to make them dynamic. And I did.
But in addition to the crooked code, I got 2 auto-update functions. 1 setInterval function per chart.
I need one function. One event that will update these 2 charts.
Graph 1 and 2 are identical (the only difference is in the names of the variables) There is a
lot of code (let it be all) - but the important code is only 10-15 lines.
The rest of the settings and a copy of the code above (chart 1, chart 2... -copies).
Event to edit-change (Auto-update event)
How to do it? html

code


<!-- Контейнеры для графика -->
<div id="GRAPH1_container"></div>
<div id="GRAPH2_container"></div>


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

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

//НАСТРОЙКИ (это не важно)
title: {text: 'График 1'},
credits: {enabled: false},
rangeSelector: {enabled: false}, //Упрощаем график - отключаем выбор периода вверху слева (день-месяц), справа (по датам)
navigator: {enabled: false}, //Упрощаем график - отключаем навигатор (выбор периода внизу)
navigation: {buttonOptions: {enabled: false}}, //Скрываем выпадающее меню справа с опцией сохранения графика в файл
scrollbar: {enabled: false}, //Скрываем скролбар внизу графика
colors: ['#2b908f','#90ee7e',],

chart: {zoomType: 'x',



//СОБЫТИЕ АВТООБНОВЛЕНИЯ  (вот оно!)
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); //Автообновление каждые 3 секунды
}
}
//КОНЕЦ СОБЫТИЯ АВТООБНОВЛЕНИЯ  (конец важного кода)


//Ниже снова всякие настройки...
}, //Зум по оси х
boost: {useGPUTranslations: true}, //Включаем ускорение с помощью boost.js
xAxis: {type: 'datetime'}, //Отображаем дату и время по оси х
yAxis: {},
legend:{layout: 'vertical',align: 'bottom',verticalAlign: 'top',enabled: true},

plotOptions: 
{
series: {
animation: false,
turboThreshold: 1000, //Максимально возможное количество отображаемых точек на графике. 1000 по умолчанию
compare: 'number', //number,percent,string сравнение в процентах или показ значения
showInNavigator: true
}
},

tooltip: {pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>',valueDecimals: 4,split: true},
series: GRAPH1seriesOptions
});
}
//КОНЕЦ НАСТРОЕК




//НАЧАЛЬНЫЕ ДАННЫЕ НА ГРАФИКЕ  (это не важно)
$.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();
}
    
});

});
//КОНЕЦ НАЧАЛЬНЫХ ДАННЫХ НА ГРАФИКЕ


//Дальше просто копия с измененными переменными

//ГРАФИК 2 -  КОПИЯ ПО АНАЛОГИИ С ГРАФИКОМ ВЫШЕ


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

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

//НАСТРОЙКИ
title: {text: 'График 2'},
credits: {enabled: false},
rangeSelector: {enabled: false}, //Упрощаем график - отключаем выбор периода вверху слева (день-месяц), справа (по датам)
navigator: {enabled: false}, //Упрощаем график - отключаем навигатор (выбор периода внизу)
navigation: {buttonOptions: {enabled: false}}, //Скрываем выпадающее меню справа с опцией сохранения графика в файл
scrollbar: {enabled: false}, //Скрываем скролбар внизу графика
colors: ['#C86938','#C828B0',],

chart: {zoomType: 'x',





//СОБЫТИЕ АВТООБНОВЛЕНИЯ
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); //Автообновление каждые 3 секунды
}
}
//КОНЕЦ СОБЫТИЯ АВТООБНОВЛЕНИЯ


}, //Зум по оси х
boost: {useGPUTranslations: true}, //Включаем ускорение с помощью boost.js
xAxis: {type: 'datetime'}, //Отображаем дату и время по оси х
yAxis: {},
legend:{layout: 'vertical',align: 'bottom',verticalAlign: 'top',enabled: true},


plotOptions: 
{
series: {
animation: false,
turboThreshold: 1000, //Максимально возможное количество отображаемых точек на графике. 1000 по умолчанию
compare: 'number', //number,percent,string сравнение в процентах или показ значения
showInNavigator: true
}
},

tooltip: {pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>',valueDecimals: 4,split: true},
series: GRAPH2seriesOptions
});
}
//КОНЕЦ НАСТРОЕК



//НАЧАЛЬНЫЕ ДАННЫЕ НА ГРАФИКЕ
$.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();
}
    
});

});
//КОНЕЦ НАЧАЛЬНЫХ ДАННЫХ НА ГРАФИКЕ

Answer the question

In order to leave comments, you need to log in

1 answer(s)
S
Stalker_RED, 2018-10-10
@Stalker_RED

You yourself wrote setInterval twice.
Remove one of them.
And in general, a lot of repetitive code.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question