# Strange visualization issue with ui dashboard "average-bars"

**URL:** <https://discourse.nodered.org/t/strange-visualization-issue-with-ui-dashboard-average-bars/37133>\
**Category:** Dashboard\
**Created:** [7 December 2020 14:09 UTC](https://discourse.nodered.org/t/strange-visualization-issue-with-ui-dashboard-average-bars/37133 "2020-12-07T14:09:28Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![steirx](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steirx/32/56722_2.png) [@steirx](https://discourse.nodered.org/u/steirx)\
**Post date:** [7 December 2020 14:09 UTC](https://discourse.nodered.org/t/strange-visualization-issue-with-ui-dashboard-average-bars/37133/1 "2020-12-07T14:09:28Z")

</div>

hi there,  
I have adapted a flow for the dynamic visualization of zigbee battery device status. So far so good. However I have a strange phenomenon with varying bar width and y-offset - see attached screenshot:

 ![zigbe-battery-average-bars](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/3/33e46d03be02e051f6777b49be23a39b470e0705.png)

The bars are "added" over time as new zigbee devices report on the network. However, I still have a hard time to understand, if the width or off-set variations can be caused by something I did, or if it is an issue with the "average-bars" node?

Here the flow:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/9/a9a76a39130429222e0d158c7aee596cc2a39f57.png)

```auto
[
    {
        "id": "58348f97.92d9b",
        "type": "ui_template",
        "z": "c4134334.87229",
        "group": "ac1288ed.b27d68",
        "name": "",
        "order": 1,
        "width": 20,
        "height": 8,
        "format": "<div ng-bind-html=\"msg.payload\"></div>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "templateScope": "local",
        "x": 765,
        "y": 531,
        "wires": [
            []
        ]
    },
    {
        "id": "9061465f.df66f8",
        "type": "average-bars",
        "z": "c4134334.87229",
        "name": "average-bars2",
        "title": "Battery %",
        "period": "topic",
        "yMin": "0",
        "yMax": "100",
        "showBarsValue": true,
        "showScaleValue": true,
        "showLastValue": false,
        "showAverageValue": false,
        "showMinimumValue": false,
        "showMaximumValue": false,
        "maxBar": "50",
        "topColor": "#1afa0a",
        "bottomColor": "#df3d20",
        "unit": "%",
        "fontColor": "#ffffff",
        "barStyle": "Equalizer",
        "decimal": "0",
        "x": 585,
        "y": 531,
        "wires": [
            [
                "58348f97.92d9b"
            ]
        ]
    },
    {
        "id": "256057db.4693d8",
        "type": "function",
        "z": "c4134334.87229",
        "name": "Update Chart",
        "func": "var data = flow.get(\"zigbeeBattery\");\n\narr = [];\n\nvar count = data.length;\n for ( i=0; i < count; i++){\n var nmsg = {payload:data[i].info.battery, topic:data[i].info.name};\n arr.push(nmsg);\n }\n\nreturn [arr];",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "x": 475,
        "y": 451,
        "wires": [
            [
                "9061465f.df66f8"
            ]
        ]
    },
    {
        "id": "c1f85a56.feea38",
        "type": "inject",
        "z": "c4134334.87229",
        "name": "Update 5min",
        "props": [
            {
                "p": "payload",
                "v": "",
                "vt": "date"
            },
            {
                "p": "topic",
                "v": "",
                "vt": "string"
            }
        ],
        "repeat": "300",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 145,
        "y": 451,
        "wires": [
            [
                "256057db.4693d8"
            ]
        ]
    },
    {
        "id": "663c34e0.2f209c",
        "type": "inject",
        "z": "c4134334.87229",
        "name": "every 24",
        "props": [
            {
                "p": "payload",
                "v": "clear",
                "vt": "str"
            },
            {
                "p": "topic",
                "v": "",
                "vt": "string"
            }
        ],
        "repeat": "",
        "crontab": "00 12 * * *",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "clear",
        "payloadType": "str",
        "x": 125,
        "y": 531,
        "wires": [
            [
                "9061465f.df66f8",
                "256057db.4693d8"
            ]
        ]
    },
    {
        "id": "5686a190.1d811",
        "type": "comment",
        "z": "c4134334.87229",
        "name": "update device list",
        "info": "",
        "x": 115,
        "y": 405,
        "wires": []
    },
    {
        "id": "b7724ed9.e27e7",
        "type": "comment",
        "z": "c4134334.87229",
        "name": "Clear Average",
        "info": "",
        "x": 375,
        "y": 511,
        "wires": []
    },
    {
        "id": "ac1288ed.b27d68",
        "type": "ui_group",
        "name": "Zigbee Battery Status",
        "tab": "8670da6a.136438",
        "order": 1,
        "disp": true,
        "width": "20",
        "collapse": false
    },
    {
        "id": "8670da6a.136438",
        "type": "ui_tab",
        "name": "SYS - Zigbee Battery",
        "icon": "dashboard",
        "order": 35,
        "disabled": false,
        "hidden": false
    }
]

```

Any thoughts?  
Thanks,

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [7 December 2020 17:43 UTC](https://discourse.nodered.org/t/strange-visualization-issue-with-ui-dashboard-average-bars/37133/2 "2020-12-07T17:43:32Z")

</div>

hi it's not one of the core dashboard nodes so hopefully someone can spot the issue - but you may have to try to contact the author direct via the nodes project page - [https://github.com/nazcasun/node-red-contrib-dashboard-average-bars](https://github.com/nazcasun/node-red-contrib-dashboard-average-bars)

---

<div class="post-metadata">

**Author:** ![steirx](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steirx/32/56722_2.png) [@steirx](https://discourse.nodered.org/u/steirx)\
**Post date:** [7 December 2020 17:57 UTC](https://discourse.nodered.org/t/strange-visualization-issue-with-ui-dashboard-average-bars/37133/3 "2020-12-07T17:57:29Z")

</div>

oops - didn't realize as it installed itself into the dashboard group! THANKS

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [6 January 2021 17:57 UTC](https://discourse.nodered.org/t/strange-visualization-issue-with-ui-dashboard-average-bars/37133/4 "2021-01-06T17:57:31Z")

</div>

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