# Displaying data from Inject Node as a Pie Chart
**URL:** https://discourse.nodered.org/t/displaying-data-from-inject-node-as-a-pie-chart/94817
**Category:** Dashboard
**Tags:** dashboard-2
**Created:** [22 January 2025 09:02 UTC](https://discourse.nodered.org/t/displaying-data-from-inject-node-as-a-pie-chart/94817 "2025-01-22T09:02:34Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@joehi](https://discourse.nodered.org/u/joehi)
#### Post date: [22 January 2025 09:02 UTC](https://discourse.nodered.org/t/displaying-data-from-inject-node-as-a-pie-chart/94817/1 "2025-01-22T09:02:34Z")
Hello, I am new to using Raspberry Pi and Node-RED. Currently, I am facing a confusing issue about how to display data from the inject node to the template node so that it can appear as a pie chart on the UI/dashboard. I am using Node-RED Dashboard version 2.0. Can anyone help me?
```auto
[
{
"id": "980622ebca896d23",
"type": "ui-template",
"z": "982297f0c4d67695",
"group": "5e9cd1bf9f97ea78",
"page": "",
"ui": "",
"name": "Pie Chart Vue.js",
"order": 5,
"width": "5",
"height": "3",
"format": "\n\n\n \n \n Pie Chart Example\n \n \n\n\n \n \n\n\n",
"storeOutMessages": true,
"passthru": false,
"templateScope": "local",
"className": "",
"x": 440,
"y": 1040,
"wires": [
[
"7aafba82adab52cd"
]
]
},
{
"id": "70c02b8d0732ef6a",
"type": "inject",
"z": "982297f0c4d67695",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "Running",
"payload": "58",
"payloadType": "num",
"x": 230,
"y": 1020,
"wires": [
[
"980622ebca896d23"
]
]
},
{
"id": "7aafba82adab52cd",
"type": "debug",
"z": "982297f0c4d67695",
"name": "debug 12",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "false",
"statusVal": "",
"statusType": "auto",
"x": 620,
"y": 1040,
"wires": []
},
{
"id": "3c3b847ba187e471",
"type": "inject",
"z": "982297f0c4d67695",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "Running",
"payload": "98",
"payloadType": "num",
"x": 230,
"y": 1060,
"wires": [
[
"980622ebca896d23"
]
]
},
{
"id": "5e9cd1bf9f97ea78",
"type": "ui-group",
"name": "led",
"page": "d0621b8f20aee671",
"width": "12",
"height": "11",
"order": 2,
"showTitle": false,
"className": "",
"visible": "true",
"disabled": "false",
"groupType": "default"
},
{
"id": "d0621b8f20aee671",
"type": "ui-page",
"name": "Charts Example",
"ui": "57cca3cf771b1acc",
"path": "/charts-example",
"icon": "chart-box-outline",
"layout": "flex",
"theme": "5075a7d8e4947586",
"breakpoints": [
{
"name": "Default",
"px": "0",
"cols": "3"
},
{
"name": "Tablet",
"px": "576",
"cols": "6"
},
{
"name": "Small Desktop",
"px": "768",
"cols": "9"
},
{
"name": "Desktop",
"px": "1024",
"cols": "12"
}
],
"order": 1,
"className": "",
"visible": "true",
"disabled": "false"
},
{
"id": "57cca3cf771b1acc",
"type": "ui-base",
"name": "dashboard",
"path": "/dashboard",
"appIcon": "",
"includeClientData": true,
"acceptsClientConfig": [
"ui-notification",
"ui-control"
],
"showPathInSidebar": false,
"headerContent": "none",
"navigationStyle": "none",
"titleBarStyle": "fixed",
"showReconnectNotification": false,
"notificationDisplayTime": "5",
"showDisconnectNotification": false
},
{
"id": "5075a7d8e4947586",
"type": "ui-theme",
"name": "persentase running/not running",
"colors": {
"surface": "#ffffff",
"primary": "#ffffff",
"bgPage": "#ffffff",
"groupBg": "#ffffff",
"groupOutline": "#ffffff"
},
"sizes": {
"pagePadding": "12px",
"groupGap": "12px",
"groupBorderRadius": "4px",
"widgetGap": "12px",
"density": "default"
}
}
]
```
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [22 January 2025 10:16 UTC](https://discourse.nodered.org/t/displaying-data-from-inject-node-as-a-pie-chart/94817/2 "2025-01-22T10:16:03Z")
Hi, welcome to the forum.
Some pointers to help you get your question to the right folk.
1. There are 2 main node packages named node-red-dashboard. the old (now depreciated) `node-red-dashboard` and the newer, VUE based `@flowfuse/node-red-dashboard` (also referred to as **dashboard 2** ). Your tag states #node-red-dashboard which by itself is interpreted as dashboard 1 (legacy). I would recommend you set this to #dashboard-2 (you can update the tags after posting)
2. Unfortunately, your flow will be unusable. In order to make code readable and usable it is necessary to surround your code with three backticks (also known as a left quote or backquote `````)
---
### Author:  [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [24 January 2025 11:23 UTC](https://discourse.nodered.org/t/displaying-data-from-inject-node-as-a-pie-chart/94817/3 "2025-01-24T11:23:22Z")
Hi @joehi - there is a Pie Chart already available in the "Chart" node - [docs](https://dashboard.flowfuse.com/nodes/widgets/ui-chart.html#pie-doughnut-charts) - I'd recommend taking a look at that, rather than trying to roll out your own in a Template node.
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [24 January 2025 11:44 UTC](https://discourse.nodered.org/t/displaying-data-from-inject-node-as-a-pie-chart/94817/4 "2025-01-24T11:44:32Z")
> [@joepavitt](#):
>
> Pie Chart already available in the "Chart" node - [docs](https://dashboard.flowfuse.com/nodes/widgets/ui-chart.html#pie-doughnut-charts)
And in the Link joe provided there is a button labelled "Try Demo" at the top of the page that has downloadable demo flows
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [23 February 2025 11:44 UTC](https://discourse.nodered.org/t/displaying-data-from-inject-node-as-a-pie-chart/94817/5 "2025-02-23T11:44:44Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.