Values getting dropped in chart 2.0 - Bar graph

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,

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

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

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

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

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

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

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

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