node-red-dashboard icon indicating copy to clipboard operation
node-red-dashboard copied to clipboard

Ui-chart line chart series type:json not rendering data when json array contains a single key

Open tonymacdonald2008 opened this issue 1 year ago • 0 comments

Current Behavior

When creating a line chart using the ui-chart node with the series property type set to JSON, the chart data is not plotted correctly if the JSON array contains only a single key. All data are correctly plotted if several keys are provided.

Expected Behavior

JSON type of series should plot correctly even if only one key is provided in the JSON array.

Steps To Reproduce

sample flow

[
    {
        "id": "5141797ff72d0139",
        "type": "tab",
        "label": "Flow 3",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "34f54f48465ae005",
        "type": "inject",
        "z": "5141797ff72d0139",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": true,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "[{\"x_value\":12,\"value\":17,\"nested\":{\"value\":24}},{\"x_value\":17,\"value\":36,\"nested\":{\"value\":10}},{\"x_value\":23,\"value\":19,\"nested\":{\"value\":75}},{\"x_value\":34,\"value\":12,\"nested\":{\"value\":23}}]",
        "payloadType": "json",
        "x": 156.4545440673828,
        "y": 149.48723220214845,
        "wires": [
            [
                "65e8d05f0bc013dc",
                "2ae6bb0373297074"
            ]
        ]
    },
    {
        "id": "65e8d05f0bc013dc",
        "type": "ui-chart",
        "z": "5141797ff72d0139",
        "group": "2e3b032902dae011",
        "name": "chart with bogus second key",
        "label": "chart",
        "order": 9007199254740991,
        "chartType": "line",
        "category": "[\"value\",\"\"]",
        "categoryType": "json",
        "xAxisProperty": "x_value",
        "xAxisPropertyType": "msg",
        "xAxisType": "linear",
        "yAxisProperty": "",
        "ymin": "",
        "ymax": "",
        "action": "replace",
        "pointShape": "circle",
        "pointRadius": 4,
        "showLegend": true,
        "removeOlder": 1,
        "removeOlderUnit": "3600",
        "removeOlderPoints": "",
        "colors": [
            "#1f77b4",
            "#aec7e8",
            "#ff7f0e",
            "#2ca02c",
            "#98df8a",
            "#d62728",
            "#ff9896",
            "#9467bd",
            "#c5b0d5"
        ],
        "width": 6,
        "height": 8,
        "className": "",
        "x": 372.4601860046387,
        "y": 149.56396293640137,
        "wires": [
            []
        ]
    },
    {
        "id": "2ae6bb0373297074",
        "type": "ui-chart",
        "z": "5141797ff72d0139",
        "group": "2e3b032902dae011",
        "name": "chart with single key",
        "label": "chart",
        "order": 9007199254740991,
        "chartType": "line",
        "category": "[\"value\"]",
        "categoryType": "json",
        "xAxisProperty": "x_value",
        "xAxisPropertyType": "msg",
        "xAxisType": "linear",
        "yAxisProperty": "",
        "ymin": "",
        "ymax": "",
        "action": "replace",
        "pointShape": "circle",
        "pointRadius": 4,
        "showLegend": true,
        "removeOlder": 1,
        "removeOlderUnit": "3600",
        "removeOlderPoints": "",
        "colors": [
            "#1f77b4",
            "#aec7e8",
            "#ff7f0e",
            "#2ca02c",
            "#98df8a",
            "#d62728",
            "#ff9896",
            "#9467bd",
            "#c5b0d5"
        ],
        "width": 6,
        "height": 8,
        "className": "",
        "x": 356.0994567871094,
        "y": 199.09091186523438,
        "wires": [
            []
        ]
    },
    {
        "id": "2e3b032902dae011",
        "type": "ui-group",
        "name": "Chart-test",
        "page": "804d82131cd00633",
        "width": "6",
        "height": "1",
        "order": -1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "804d82131cd00633",
        "type": "ui-page",
        "name": "ui-chart issue",
        "ui": "e0b25391ffd62b23",
        "path": "/page5",
        "icon": "home",
        "layout": "grid",
        "theme": "156fbe7869a5bfa8",
        "order": -1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "e0b25391ffd62b23",
        "type": "ui-base",
        "name": "myDB2",
        "path": "/dashboard",
        "showPathInSidebar": false
    },
    {
        "id": "156fbe7869a5bfa8",
        "type": "ui-theme",
        "name": "basic",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094ce",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        }
    }
]

Environment

  • Dashboard version: v1.7.1
  • Node-RED version: v3.1.9
  • Node.js version: v20.12.0
  • npm version: 10.5.0
  • Platform/OS: Raspbian GNU/Linux 11 (bullseye)
  • Browser: Chrome Version 123.0.6312.106 (Official Build) (64-bit)

Have you provided an initial effort estimate for this issue?

I can not provide an initial effort estimate

tonymacdonald2008 avatar Apr 17 '24 13:04 tonymacdonald2008