Help with linear chart x-axis behavior

Dashboard
1

Hello,

I am trying to build a ui_chart in Node-Red 1.2.6 and Dashboard 2.24.1 but I'm having troubles with the X-Axis scale. I'm only seeing the last ~2 hours of data appear in the X-axis, when the x-coordinates are passed as timestamps. What I expect to see is the full range of x-axis values, which typically span about 10 hours.

The confusing thing is that I have many devices running this exact code and so I can confirm it works in the following other versions:

  • Node-Red v0.20.5 with Dashboard 2.15.5
  • Node-Red v1.1.2 with Dashboard 2.23.0

Here's an example of a message that I'm passing into the node-red-dashboard:ui_chart node:

{
    "topic": "screen_refresh",
    "_msgid": "71792fdf.38ad",
    "_event": "node:21dc8520.ba973a",
    "payload": [{
            "series": ["Planned", "Actual"],
            "data": [[{
                        "x": 1612360815216,
                        "y": 41
                    }, {
                        "x": 1612364402965,
                        "y": 41
                    }, {
                        "x": 1612368015214,
                        "y": 34
                    }, {
                        "x": 1612371603412,
                        "y": 41
                    }, {
                        "x": 1612375215212,
                        "y": 27
                    }, {
                        "x": 1612378803858,
                        "y": 41
                    }, {
                        "x": 1612382415214,
                        "y": 34
                    }, {
                        "x": 1612384796774,
                        "y": 27
                    }, {
                        "x": 1612385180922,
                        "y": 0
                    }
                ], [{
                        "x": 1612360815216,
                        "y": 25
                    }, {
                        "x": 1612364402965,
                        "y": 40
                    }, {
                        "x": 1612368015214,
                        "y": 36
                    }, {
                        "x": 1612371603412,
                        "y": 48
                    }, {
                        "x": 1612375215212,
                        "y": 33
                    }, {
                        "x": 1612378803858,
                        "y": 48
                    }, {
                        "x": 1612382415214,
                        "y": 34
                    }, {
                        "x": 1612384796774,
                        "y": 8
                    }, {
                        "x": 1612385180922,
                        "y": 0
                    }
                ]],
            "labels": [""]
        }
    ],
    "ui_control": {
        "ymin": 0,
        "ymax": 50,
        "xmin": 1612360815216,
        "xmax": 1612385180922,
        "look": "line",
        "xformat": "h a",
        "interpolate": "linear",
        "nodata": "Waiting for Data",
        "dot": true,
        "legend": "true"
    },
    "chartTitle": "Planned vs Actual Run Chart"
}
2

There is a config field in the chart where you can specify the max time range or number of data points. Is that configured appropriately?

3

Six hours presented with the data you have shared using chart node without any configuration adjustments.

image
image1101Ă—359 78.8 KB

Node-RED version: v1.2.6
29 Jan 08:00:26 - [info] Node.js  version: v14.15.3
29 Jan 08:00:26 - [info] Windows_NT 10.0.18363 x64 LE
29 Jan 08:00:27 - [info] Loading palette nodes
29 Jan 08:00:28 - [info] Dashboard version 2.26.1
4

I must be missing something in the config of the chart. I'm seeing this:

chartPic

And here's my node config:

chartConfig
chartConfig466Ă—611 12.3 KB

5

image

That should be line chart

6

Right but this should override it, it even overrides the bar chart as is:

msg.ui_control.look='line';

7

True. But it takes quite of work for chart that way and with first injection of the data, it fails for me completely. Only if chart has already initialized and then send the data again, it is rendered correctly. That will be easy fix.
The other helpful thing is to update the dashboard. There is improvements for chart.

8

The latest data is injected three times per minute, so that explains why the chart remains blank for the first 20 seconds.

Updating Dashboard might be difficult as these devices are on an isolated network. Do you have any tricks for pushing the Dashboard package manually? Would it be as simple as coping the directory ../.node-red/node_modules/node-red-dashboard?

9

I'm not expert of that area... Probably the copy paste way is not the correct way to do it.

10

The other thing, if you need to change the chart type on fly (from bar to line) is to send message with ui_control part first and then after slight delay send message with chart data only. That way the chart has time to initialize correctly.

11

Good to know, thank you!

12

Have you shown that the delay is necessary? When I have done that I did not leave a delay (send one message immediately after the other). A delay should not be necessary unless there is some async stuff in the chart node code for the ui_control message.

13

You are probably correct.
Tried and it seems that if you change the chart type on fly, it cannot render the data on first attempt.
But it works if you clear the chart after the type change and before new data input.

14

For me, sending an empty array in the payload (to clear the chart), in the ui_control message did it.

I also determined that if you set some of the bar chart options up for the bar chart (scales and axes) that these conflict with the line graph, so in the ui_control message I also had to set options: {}. See this thread for more details. Line chart not display after switch to bar and back to line

1 Like
15

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.