Живые данные Highcharts с использованием SignalR ⇐ Javascript

[Anonymous]

Я пытаюсь создать линейные диаграммы, используя библиотеку highcharts. Диаграммы создаются динамически на основе данных, полученных с сервера с первыми значениями.
Затем, используя SignalR при получении новых данных, он добавляет данные в связанную диаграмму.
Отображение первых данных — это нормально, но проблема в том, что при обновлении диаграмм в функции SignalR вместо добавления точки к существующей строке создается новая линия.

Код: Выделить всё

var pingCharts = [];

(async () => {
let box = $('#nodeBox .card-body');
const data = await fetch('/getUpdates').then(response => response.json());

data.forEach(nodePing => {
let chartContainer = $(``);
box.append(chartContainer);

let pings = nodePing.statuses;
let chart = Highcharts.stockChart(`${nodePing.nodeName}`, {
title: {
text: `${nodePing.nodeName}`,
floating: true,
style: {
fontSize: '12pt'
},
align: 'left'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Ping'
},
stackLabels: {
enabled: true
},
gridLineColor: 'transparent',
},
legend: {
enabled: false
},
plotOptions: {
area: {
marker: {
radius: 2
},
lineWidth: 1,
color: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, 'rgb(199, 113, 243)'],
[0.7, 'rgb(76, 175, 254)']
]
},
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
rangeSelector: {
enabled: false
},
navigator: {
enabled: false
},
series: [{
type: 'line',
id: `ping_${nodePing.nodeName}`,
name: 'node pings',
data: pings
.map(item => [
Date.parse(item.time),
item.value
])
}]
});
pingCharts.push({ nodeName: nodePing.nodeName, chart: chart });
});
})();

// update using SignalR
connection.on("nodePingUpdate", function (node, update) {
let chart = pingCharts.find(item => item.nodeName === node).chart;
const data = [Date.parse(update.time), update.value];
chart.get(`ping_${node}`).addPoint(data, true, false, false);
});

Подробнее здесь: https://stackoverflow.com/questions/793 ... ng-signalr