Highcharts Live-Daten mit SignalR ⇐ JavaScript

[Guest]

Ich versuche, mithilfe der Highcharts-Bibliothek einige lineare Diagramme zu erstellen. Die Diagramme werden dynamisch basierend auf den vom Server bereitgestellten Daten mit den ersten Werten erstellt.
Wenn dann SignalR verwendet wird, werden neue Daten an das zugehörige Diagramm angehängt.
Das Anzeigen der ersten Daten ist in Ordnung, aber das Problem besteht darin, dass beim Aktualisieren von Diagrammen in der SignalR-Funktion eine neue Linie erstellt wird, anstatt einen Punkt an die vorhandene Linie anzuhängen.

Code: Select all

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);
});