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

Dashboard
1

I have a multi-line chart based on the example in Dashboard 2 documentation for ui-chart under working with data " Alternatively, you can set the series property to type JSON , and then provide an array of keys (e.g. ["key1", "key2"] ), which will plot a data point for each key provided, from a single data point.".

Following the example, if the series property is set to ["value","nested.value"], both lines are plotted correctly.

If I try to simplify the chart by setting the series property to ["value"], the data is not rendered for the remaining key.

If, however, I set the series property to ["value",""], i.e. providing a bogus empty key, the "value" data are plotted correctly,

sample flow showing the case with the bogus key and the case with only one key.

[
    {
        "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"
        }
    }
]
2

Please raise this as an issue on our GitHub repository.

In the short term, to unblock here, when rendering just one value, you can select the "key type and then have "value" (in the example you've provided) as the string value, which will render a single line for that key

3

Thanks Joe
issue 779

4

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