Dashboard ui-chart does not render injected data with {x, y} format

[JorgeAlberto91MS]

Current Behavior

Charts injected with the following data format are not rendered in the Node-RED dashboard:

[{
"series": ["A", "B", "C"],
"data": [
[
{ "x": 1504029632890, "y": 5 },
{ "x": 1504029636001, "y": 4 },
{ "x": 1504029638656, "y": 2 }
],
[
{ "x": 1504029633514, "y": 6 },
{ "x": 1504029636622, "y": 7 },
{ "x": 1504029639539, "y": 6 }
],
[
{ "x": 1504029634400, "y": 7 },
{ "x": 1504029637959, "y": 7 },
{ "x": 1504029640317, "y": 7 }
]
],
"labels": [""]
}]

When this payload is injected into a ui-chart node, the chart remains empty and no data is displayed.

Additional information

• The example charts provided in the official documentation also fail to render in this environment:
  https://dashboard.flowfuse.com/nodes/widgets/ui-chart#line-charts

Expected Behavior

The chart should correctly render multiple series using timestamp-based x values and numeric y values, as documented.

Steps To Reproduce

Inyect data in format described or Import https://dashboard.flowfuse.com/nodes/widgets/ui-chart#line-charts examples

Environment

• Dashboard version: 1.30.0 or 1.30.1
• Node-RED version: 3.02
• Node.js version: v14.20.0
• npm version: v6.14.17
• Platform/OS: Linux
• Browser: Chromium

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

[JorgeAlberto91MS]

Injecting data point by point (single data points instead of arrays of {x, y} objects) does work correctly and the chart renders as expected. But Sample Data A and Sampla Data B does not.

[JorgeAlberto91MS]

Flow used

[
    {
        "id": "7d1259b5353a0135",
        "type": "inject",
        "z": "e3227b5121cd0de6",
        "name": "Sample Data A",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "Sample Data A",
        "payload": "[{\"propertyA\":10,\"propertyB\":2},{\"propertyA\":15,\"propertyB\":3},{\"propertyA\":25,\"propertyB\":5},{\"propertyA\":30,\"propertyB\":6},{\"propertyA\":40,\"propertyB\":8}]",
        "payloadType": "json",
        "x": 1100,
        "y": 660,
        "wires": [
            [
                "e2166001f12165b3"
            ]
        ]
    },
    {
        "id": "5fe4053f87838f46",
        "type": "inject",
        "z": "e3227b5121cd0de6",
        "name": "Sample Data B",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "Sample Data B",
        "payload": "[{\"propertyA\":7,\"propertyB\":6},{\"propertyA\":15,\"propertyB\":2},{\"propertyA\":24,\"propertyB\":9},{\"propertyA\":32,\"propertyB\":4},{\"propertyA\":47,\"propertyB\":9}]",
        "payloadType": "json",
        "x": 1100,
        "y": 700,
        "wires": [
            [
                "e2166001f12165b3"
            ]
        ]
    },
    {
        "id": "c83b4da9342e26f1",
        "type": "inject",
        "z": "e3227b5121cd0de6",
        "name": "Clear Chart",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "[]",
        "payloadType": "json",
        "x": 1110,
        "y": 620,
        "wires": [
            [
                "e2166001f12165b3"
            ]
        ]
    },
    {
        "id": "e2166001f12165b3",
        "type": "ui-chart",
        "z": "e3227b5121cd0de6",
        "group": "66736fd4c0739cf3",
        "name": "",
        "label": "chart",
        "order": 1,
        "chartType": "line",
        "category": "topic",
        "categoryType": "msg",
        "xAxisLabel": "",
        "xAxisProperty": "",
        "xAxisPropertyType": "timestamp",
        "xAxisType": "time",
        "xAxisFormat": "",
        "xAxisFormatType": "auto",
        "xmin": "",
        "xmax": "",
        "yAxisLabel": "",
        "yAxisProperty": "payload",
        "yAxisPropertyType": "msg",
        "ymin": "",
        "ymax": "",
        "bins": 10,
        "action": "append",
        "stackSeries": false,
        "pointShape": "circle",
        "pointRadius": 4,
        "showLegend": true,
        "removeOlder": 1,
        "removeOlderUnit": "3600",
        "removeOlderPoints": "",
        "colors": [
            "#0095ff",
            "#ff0000",
            "#ff7f0e",
            "#2ca02c",
            "#a347e1",
            "#d62728",
            "#ff9896",
            "#9467bd",
            "#c5b0d5"
        ],
        "textColor": [
            "#666666"
        ],
        "textColorDefault": true,
        "gridColor": [
            "#e5e5e5"
        ],
        "gridColorDefault": true,
        "width": "12",
        "height": "11",
        "className": "",
        "interpolation": "linear",
        "x": 1320,
        "y": 620,
        "wires": [
            []
        ]
    },
    {
        "id": "ee4aa73b41bf6754",
        "type": "change",
        "z": "e3227b5121cd0de6",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "topic",
                "pt": "msg",
                "to": "AVBBADF",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 1100,
        "y": 740,
        "wires": [
            [
                "e2166001f12165b3"
            ]
        ]
    },
    {
        "id": "3e8bfc36f909012e",
        "type": "ui-slider",
        "z": "e3227b5121cd0de6",
        "group": "66736fd4c0739cf3",
        "name": "",
        "label": "",
        "tooltip": "",
        "order": 3,
        "width": "6",
        "height": "1",
        "passthru": false,
        "outs": "all",
        "topic": "topic",
        "topicType": "msg",
        "thumbLabel": "false",
        "showTicks": "false",
        "min": 0,
        "max": "100",
        "step": 1,
        "className": "",
        "iconPrepend": "",
        "iconAppend": "",
        "color": "",
        "colorTrack": "",
        "colorThumb": "",
        "showTextField": false,
        "x": 1130,
        "y": 780,
        "wires": [
            [
                "e2166001f12165b3"
            ]
        ]
    },
    {
        "id": "66736fd4c0739cf3",
        "type": "ui-group",
        "name": "VISUALIZACIÓN",
        "page": "421f07d8fe6e3c18",
        "width": "12",
        "height": "1",
        "order": 2,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "421f07d8fe6e3c18",
        "type": "ui-page",
        "name": "DATACENTER",
        "ui": "13216bc8b1420ec5",
        "path": "/Datacenter",
        "icon": "database",
        "layout": "grid",
        "theme": "ddd22d1390610aeb",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "3"
            },
            {
                "name": "Tablet",
                "px": "576",
                "cols": "6"
            },
            {
                "name": "Small Desktop",
                "px": "768",
                "cols": "9"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "12"
            }
        ],
        "order": 3,
        "className": "",
        "visible": true,
        "disabled": false
    },
    {
        "id": "13216bc8b1420ec5",
        "type": "ui-base",
        "name": "Dashboard",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "headerContent": "page",
        "navigationStyle": "icon",
        "titleBarStyle": "default",
        "showReconnectNotification": true,
        "notificationDisplayTime": "1",
        "showDisconnectNotification": true,
        "allowInstall": true
    },
    {
        "id": "ddd22d1390610aeb",
        "type": "ui-theme",
        "name": "Default Theme",
        "colors": {
            "surface": "#768768",
            "primary": "#4d5645",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "density": "default",
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

[colinl]

The flow you posted in not importable. Edit the post and add triple backticks on separate lines before and after it and that may fix it. Check you can import it after that. If not then export it again and paste it here, with the backticks in place.

However, the format you included in the first post is in the format required by the old node-red-dashboard, not the flowfuse dashboard. The new format is much more flexible than the old one, but cannot read in the old format.

You said that the examples in the docs don't work, can you point to a particular example which does not work for you? I cannot see which one you have posted an image of.

[colinl]

As I said in your issue #2002, you are using a long out of date nodejs and an ancient version of node red, so I will not be surprised if that is causing some of your problems.

[colinl]

I think I can see what you have done. You have imported the data from one of the examples, but have not imported the chart node that matches it, so the input format does not match the format specified in the chart node.

[JorgeAlberto91MS]

Source

https://dashboard.flowfuse.com/nodes/widgets/ui-chart

Example 1 (Works properly)

Example 2 (Does not work)

[colinl]

If you mean that it does not work in the flow you posted that is because you have not imported the chart node Array Line Chart, but have instead fed the sample data into the chart node configured for the slider. This is what your flow looks like

There is no Array Line Chart in the flow.

[colinl]

Also please respond to my request on #2002

[JorgeAlberto91MS]

If you mean that it does not work in the flow you posted that is because you have not imported the chart node Array Line Chart, but have instead fed the sample data into the chart node configured for the slider. This is what your flow looks like

There is no Array Line Chart in the flow.

Thanks for the clarification.

However, I’m not entirely sure I understand the difference between an "Array Line Chart" and a Simple "Chart". Is this a matter of node type or just configuration within the same chart node?

From my perspective, it wasn’t clear that a different chart variant needed to be explicitly added, so any clarification on how they differ (and when each one should be used) would be very helpful.

[colinl]

Those are just the names that have been given to the chart nodes. They are configured differently for the different format of data they are being sent.

If you mean that it does not work in the flow you posted that is because you have not imported the chart node Array Line Chart, but have instead fed the sample data into the chart node configured for the slider. This is what your flow looks like

There is no Array Line Chart in the flow.

Thanks for the clarification.

However, I’m not entirely sure I understand the difference between an "Array Line Chart" and a Simple "Chart". Is this a matter of node type or just configuration within the same chart node?

From my perspective, it wasn’t clear that a different chart variant needed to be explicitly added, so any clarification on how they differ (and when each one should be used) would be very helpful.

Look that the configurations to see the differences. Read the help text in the right hand pane in the editor for a brief description of how to configure it, and the more detailed description in the docs that you linked to.