Answer the question
In order to leave comments, you need to log in
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>
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
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 questionAsk a Question
731 491 924 answers to any question