Values getting dropped in chart 2.0 - Bar graph

shubhamnodered · 15 September 2024 11:36

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:

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

Regards,

joepavitt · 15 September 2024 16:32

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

E1cid · 16 September 2024 12:43

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

shubhamnodered · 18 September 2024 12:40

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"
        }
    }
]

joepavitt · 18 September 2024 12:51

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

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

shubhamnodered · 18 September 2024 13:29

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

shubhamnodered · 18 September 2024 15:51

After update, following things observed:

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

shubhamnodered · 24 September 2024 08:31

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

joepavitt · 24 September 2024 08:37

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

system · 24 October 2024 08:38

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

Topic		Replies	Views
Storing Chart Data from a D2 Dashboard Dashboard docker , dashboard-2	16	159	12 October 2024
Problem with filling data to bar chart Dashboard	2	391	23 April 2020
Unable to switch from Line to Bar Chart Dashboard	3	308	29 April 2020
Multiple values in bar chart Dashboard dashboard-2	6	117	31 July 2024
Looking to change the label of a bar chart or graph dynamically Dashboard node-red-dashboard , chart	2	263	26 August 2023

Values getting dropped in chart 2.0 - Bar graph

Related topics