К сожалению, пример на jsfiddle не работает (сложности с хедерами, gnix или ещё с чем то - неважно).
Поэтому пришлось выложить пример на сервер.
https://tinyurl.com/y8qznpda
Изначально у меня было 2 статических графика. Но мне понадобилось сделать их динамическими. И я сделал.
Но помимо кривого кода, у меня получилось 2 функции автообновления. По 1 функции setInterval на график.
Мне нужна одна функция. Одно событие, которое обновит эти 2 графика.
График 1 и 2 идентичны (разница только в названии переменных)
Кода много (пусть будет весь) - но важный код всего 10-15 строк.
Остальное настройки и копия кода выше (график 1, график 2... -копии).
Событие, которое надо редактировать-изменить (Событие автообновления)
Как это сделать?
Код
html
<!-- Контейнеры для графика -->
<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();
}
});
});
//КОНЕЦ НАЧАЛЬНЫХ ДАННЫХ НА ГРАФИКЕ
