Values getting dropped in chart 2.0 - Bar graph

Dashboard
1

Hi Team,

For the given bar chart (Chart 2.0) visualized, i am feeding random numerical number every 1 second. However, the thing i observed:

  1. Some of the value get dropped.
  2. Bar chart is not updating/appending values dynamically unless i refresh the dashboard screen manually.

Regards,

2024-09-13T14_40_50
2024-09-13T14_40_501371×363 21.8 KB

2

Does this start immediately, or after a particular time period?

3

Might be same issue as here Dashboard 2.0 chart node page reconnect issue

4

Hi Joe, thanks for prompt reply. It starts after 3-4 seconds.

Another thing - What value exactly needs to be inserted on PROPERTIES field? Why am i asking - Because for Line chart, i have to provide 'msg.topic' field though any string value can also be provided. But for bar chart, it only takes msg.payload field. Its confusing, and documentation doesnot help much regarding this

I am also attaching the flow. Two second deploy will explain it.

[
    {
        "id": "6d4f58b3a61c51e2",
        "type": "tab",
        "label": "Flow 1",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "11f40ce82162dbbf",
        "type": "junction",
        "z": "6d4f58b3a61c51e2",
        "x": 740,
        "y": 260,
        "wires": [
            [
                "58efe7cb4e73b5dc",
                "7b8c9493e2b9e65b"
            ]
        ]
    },
    {
        "id": "2aafa4bacc057d08",
        "type": "Number",
        "z": "6d4f58b3a61c51e2",
        "name": "Random Number",
        "minimum": "1",
        "maximum": "10",
        "roundTo": "2",
        "Floor": true,
        "x": 650,
        "y": 180,
        "wires": [
            [
                "7b8c9493e2b9e65b",
                "58efe7cb4e73b5dc"
            ]
        ]
    },
    {
        "id": "f512f8f264c30ed7",
        "type": "inject",
        "z": "6d4f58b3a61c51e2",
        "name": "",
        "props": [],
        "repeat": "1",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "x": 470,
        "y": 180,
        "wires": [
            [
                "2aafa4bacc057d08"
            ]
        ]
    },
    {
        "id": "ce485bff1e5372cc",
        "type": "debug",
        "z": "6d4f58b3a61c51e2",
        "name": "debug 104",
        "active": false,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 1090,
        "y": 180,
        "wires": []
    },
    {
        "id": "7b8c9493e2b9e65b",
        "type": "ui-chart",
        "z": "6d4f58b3a61c51e2",
        "group": "542f68c8e704382b",
        "name": "Line chart",
        "label": "chart",
        "order": 1,
        "chartType": "line",
        "category": "topic",
        "categoryType": "msg",
        "xAxisLabel": "",
        "xAxisProperty": "",
        "xAxisPropertyType": "msg",
        "xAxisType": "time",
        "xAxisFormat": "",
        "xAxisFormatType": "auto",
        "yAxisLabel": "",
        "yAxisProperty": "",
        "ymin": "",
        "ymax": "",
        "action": "append",
        "pointShape": "circle",
        "pointRadius": 4,
        "showLegend": true,
        "removeOlder": 1,
        "removeOlderUnit": "3600",
        "removeOlderPoints": "30",
        "colors": [
            "#1f77b4",
            "#aec7e8",
            "#ff7f0e",
            "#2ca02c",
            "#98df8a",
            "#d62728",
            "#ff9896",
            "#9467bd",
            "#c5b0d5"
        ],
        "textColor": [
            "#666666"
        ],
        "textColorDefault": true,
        "gridColor": [
            "#e5e5e5"
        ],
        "gridColorDefault": true,
        "width": 6,
        "height": 8,
        "className": "",
        "x": 920,
        "y": 180,
        "wires": [
            [
                "ce485bff1e5372cc"
            ]
        ]
    },
    {
        "id": "1286e3378f1f23bb",
        "type": "debug",
        "z": "6d4f58b3a61c51e2",
        "name": "debug 105",
        "active": false,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 1090,
        "y": 220,
        "wires": []
    },
    {
        "id": "58efe7cb4e73b5dc",
        "type": "ui-chart",
        "z": "6d4f58b3a61c51e2",
        "group": "cf37b85352bc939a",
        "name": "Bar chart",
        "label": "chart",
        "order": 1,
        "chartType": "bar",
        "category": "payload",
        "categoryType": "msg",
        "xAxisLabel": "",
        "xAxisProperty": "",
        "xAxisPropertyType": "msg",
        "xAxisType": "category",
        "xAxisFormat": "",
        "xAxisFormatType": "auto",
        "yAxisLabel": "",
        "yAxisProperty": "",
        "ymin": "",
        "ymax": "",
        "action": "append",
        "pointShape": "circle",
        "pointRadius": 4,
        "showLegend": true,
        "removeOlder": 1,
        "removeOlderUnit": "3600",
        "removeOlderPoints": "",
        "colors": [
            "#1f77b4",
            "#aec7e8",
            "#ff7f0e",
            "#2ca02c",
            "#98df8a",
            "#d62728",
            "#ff9896",
            "#9467bd",
            "#c5b0d5"
        ],
        "textColor": [
            "#666666"
        ],
        "textColorDefault": true,
        "gridColor": [
            "#e5e5e5"
        ],
        "gridColorDefault": true,
        "width": 6,
        "height": 8,
        "className": "",
        "x": 920,
        "y": 220,
        "wires": [
            [
                "1286e3378f1f23bb"
            ]
        ]
    },
    {
        "id": "b21df8b397cb3233",
        "type": "inject",
        "z": "6d4f58b3a61c51e2",
        "name": "Clear Chart",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "[]",
        "payloadType": "json",
        "x": 490,
        "y": 260,
        "wires": [
            [
                "11f40ce82162dbbf"
            ]
        ]
    },
    {
        "id": "542f68c8e704382b",
        "type": "ui-group",
        "name": "Line chart",
        "page": "dc369f7fad35a365",
        "width": "6",
        "height": "1",
        "order": 2,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "cf37b85352bc939a",
        "type": "ui-group",
        "name": "Bar chart",
        "page": "dc369f7fad35a365",
        "width": "6",
        "height": "1",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "dc369f7fad35a365",
        "type": "ui-page",
        "name": "Page 1",
        "ui": "ea968a3daf2004fd",
        "path": "/page1",
        "icon": "home",
        "layout": "grid",
        "theme": "6d58dbc21b64fa05",
        "order": 1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "ea968a3daf2004fd",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "showPageTitle": true,
        "navigationStyle": "icon",
        "titleBarStyle": "hidden"
    },
    {
        "id": "6d58dbc21b64fa05",
        "type": "ui-theme",
        "name": "Default Theme",
        "colors": {
            "surface": "#281515",
            "primary": "#cc0000",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]
5

Not sure I follow what you're asking? This is the config available for a bar chart:

Screenshot 2024-09-18 at 13.49.59
Screenshot 2024-09-18 at 13.49.591552×1028 47.3 KB

Not sure if you're viewing the online documentation at all, but we have extensive examples and detail available there too: Chart ui-chart | Node-RED Dashboard 2.0

6

Update required from my end.
Updated - 1.13 >> 1.16

7

After update, following things observed:

  1. Solved - Now, x-axis can be assigned with timestamp [Using msg.xxx property]
  2. Solved - Bar chart is displaying every injected value. [Refer image]
  3. Problem - LIFO is not happening due to which Bar chart continously adding new value without removing old values. [Refer image]
  4. Problem - Unlike Line chart, there is no option to set limit on X-axis

image
image908×547 14.9 KB

image

8

@joepavitt @E1cid , Hi guys, I haven't heard from you?

9

We have a fix pushed yesterday, hopefully getting a release out today