diff --git a/nodes/widgets/ui_chart.js b/nodes/widgets/ui_chart.js index 1e049be45..e5d916898 100644 --- a/nodes/widgets/ui_chart.js +++ b/nodes/widgets/ui_chart.js @@ -63,10 +63,12 @@ module.exports = function (RED) { const ago = (removeOlder * removeOlderUnit) * 1000 // milliseconds ago const cutOff = (new Date()).getTime() - ago const filterFn = (msg) => { - let timestamp = msg._datapoint.x + // msg._datapoint may be a single point or, in the case of multiple series in one msg, an array + // if it is an array then all the elements will have the same timestamp so use the first one + let timestamp = Array.isArray(msg._datapoint) ? msg._datapoint[0]?.x : msg._datapoint.x // is x already a millisecond timestamp? - if (typeof (msg._datapoint.x) === 'string') { - timestamp = (new Date(msg._datapoint.x)).getTime() + if (typeof (timestamp) === 'string') { + timestamp = (new Date(timestamp)).getTime() } return timestamp > cutOff } diff --git a/ui/src/widgets/ui-chart/UIChart.vue b/ui/src/widgets/ui-chart/UIChart.vue index 4610161e9..9d98891fc 100644 --- a/ui/src/widgets/ui-chart/UIChart.vue +++ b/ui/src/widgets/ui-chart/UIChart.vue @@ -514,13 +514,14 @@ export default { // determine what type of msg we have if (Array.isArray(msg) && msg.length > 0) { // we have received an array of messages (loading from stored history) - msg.forEach((m, i) => { - const p = m.payload - const d = m._datapoint // server-side we compute a chart friendly format - const label = d.category - if (label !== null && label !== undefined) { - this.addPoints(p, d, label, options) - } + msg.forEach((m) => { + const datapoints = Array.isArray(m._datapoint) ? m._datapoint : [m._datapoint] + datapoints.forEach((d) => { + const label = d.category + if (label !== null && label !== undefined) { + this.addPoints(m.payload, d, label, options) + } + }) }) } else if (Array.isArray(payload) && msg.payload.length > 0) { // we have received a message with an array of data points