# Ui-chart line chart series type:json not rendering data when json array contains a single key
**URL:** https://discourse.nodered.org/t/ui-chart-line-chart-series-type-json-not-rendering-data-when-json-array-contains-a-single-key/87207
**Category:** Dashboard
**Tags:** dashboard-2
**Created:** [12 April 2024 20:00 UTC](https://discourse.nodered.org/t/ui-chart-line-chart-series-type-json-not-rendering-data-when-json-array-contains-a-single-key/87207 "2024-04-12T20:00:38Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@tonymacdonald](https://discourse.nodered.org/u/tonymacdonald)
#### Post date: [12 April 2024 20:00 UTC](https://discourse.nodered.org/t/ui-chart-line-chart-series-type-json-not-rendering-data-when-json-array-contains-a-single-key/87207/1 "2024-04-12T20:00:38Z")
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.
```auto
[
{
"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"
}
}
]
```
---
### Author:  [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [16 April 2024 13:20 UTC](https://discourse.nodered.org/t/ui-chart-line-chart-series-type-json-not-rendering-data-when-json-array-contains-a-single-key/87207/2 "2024-04-16T13:20:44Z")
Please raise this as an issue on our [GitHub repository](https://github.com/FlowFuse/node-red-dashboard/issues).
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
---
### Author:  [@tonymacdonald](https://discourse.nodered.org/u/tonymacdonald)
#### Post date: [17 April 2024 13:25 UTC](https://discourse.nodered.org/t/ui-chart-line-chart-series-type-json-not-rendering-data-when-json-array-contains-a-single-key/87207/3 "2024-04-17T13:25:33Z")
Thanks Joe
issue 779
>
>
> \### Current Behavior
>
> When creating a line chart using the ui-chart node with th…e 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
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [17 May 2024 13:26 UTC](https://discourse.nodered.org/t/ui-chart-line-chart-series-type-json-not-rendering-data-when-json-array-contains-a-single-key/87207/4 "2024-05-17T13:26:19Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.