# Dashboard 2.0 ui Graph Multiple Bars

**URL:** <https://discourse.nodered.org/t/dashboard-2-0-ui-graph-multiple-bars/85336>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [8 February 2024 18:41 UTC](https://discourse.nodered.org/t/dashboard-2-0-ui-graph-multiple-bars/85336 "2024-02-08T18:41:44Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![jwj001](https://avatars.discourse-cdn.com/v4/letter/j/8e8cbc/32.png) [@jwj001](https://discourse.nodered.org/u/jwj001)\
**Post date:** [8 February 2024 18:41 UTC](https://discourse.nodered.org/t/dashboard-2-0-ui-graph-multiple-bars/85336/1 "2024-02-08T18:41:44Z")

</div>

I am new to node-red, i have started using Dashboard v2 and i am struggling with the way to put my data together to generate a bar chart. Between google and forums i have been able to get some bars on the graph. I am trying to get multiple bars on the same x axis. I have an array of data coming in from sql. With the code below i was able to plot some data, but i have another variable that i need to plot next to the current bar. ..

```auto
var inputArray = msg.payload;
var arrayOfObjects = [];
// Create objects and add them to the array
for (var i = 0; i < inputArray.length; i++) {
var object1 = { category: inputArray[i]["DAY"], value: inputArray[i]["MACHINE HOURS"] };
//var object2 = { category: inputArray[i]["DAY"], value: inputArray[i]["FEEDER HOURS"] };
arrayOfObjects.push(object1);
//arrayOfObjects.push(object2);
}
// Assign the array of objects to msg.payload
msg.payload = arrayOfObjects;
// Return the modified message object
return msg; 

```

UI Graph Node setup:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/b/4ba0b3032cfcf27edb77abeb06edb163a7d636fe.png)

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [8 February 2024 20:02 UTC](https://discourse.nodered.org/t/dashboard-2-0-ui-graph-multiple-bars/85336/2 "2024-02-08T20:02:18Z")

</div>

Do you a sample of the results you get from your SQL query?

Because Dashboard 2.0 is fairly new, and the google results you're likely finding are for the original Dashboard, there may be some mix up.

Whilst this data manipulation is still an option, I built the new chart node so that in _most_ cases, no data manipulation is required.

Also, when you say you want to plot

> [@jwj001](#):
>
> another variable that i need to plot next to the current

I'm not too sure what you mean? Do you mean 2 y-axes, or multiple bars along the same x-axis?

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [8 February 2024 20:04 UTC](https://discourse.nodered.org/t/dashboard-2-0-ui-graph-multiple-bars/85336/3 "2024-02-08T20:04:51Z")

</div>

Just inspecting your code, you could in theory feed your SQL data straight into the chart node, woth no data manipulation required, and set the "series" key to `DAY` and the "y" key to `MACHINE HOURS`.

The original Dashboard always required data manipulation into category/value key pairs, whereas given we now allow for defining the keys, this is no longer necessary in most cases.

---

<div class="post-metadata">

**Author:** ![jwj001](https://avatars.discourse-cdn.com/v4/letter/j/8e8cbc/32.png) [@jwj001](https://discourse.nodered.org/u/jwj001)\
**Post date:** [9 February 2024 08:36 UTC](https://discourse.nodered.org/t/dashboard-2-0-ui-graph-multiple-bars/85336/4 "2024-02-09T08:36:52Z")

</div>

Hi Joepavitt

Here is my output for sql.

```auto
[{"DAY":1,"MACHINE HOURS":"0","FEEDER HOURS":"0"},{"DAY":2,"MACHINE HOURS":"0","FEEDER HOURS":"0"},{"DAY":3,"MACHINE HOURS":"0","FEEDER HOURS":"0"},{"DAY":4,"MACHINE HOURS":"0","FEEDER HOURS":"0"},{"DAY":5,"MACHINE HOURS":"0","FEEDER HOURS":"0"},{"DAY":6,"MACHINE HOURS":"0","FEEDER HOURS":"0"},{"DAY":7,"MACHINE HOURS":"250","FEEDER HOURS":"231"},{"DAY":8,"MACHINE HOURS":"220","FEEDER HOURS":"197"},{"DAY":9,"MACHINE HOURS":"250","FEEDER HOURS":"221"},{"DAY":10,"MACHINE HOURS":"366","FEEDER HOURS":"346"},{"DAY":11,"MACHINE HOURS":"336","FEEDER HOURS":"287"},{"DAY":12,"MACHINE HOURS":"361","FEEDER HOURS":"260"},{"DAY":13,"MACHINE HOURS":"376","FEEDER HOURS":"353"},{"DAY":14,"MACHINE HOURS":"381","FEEDER HOURS":"355"},{"DAY":15,"MACHINE HOURS":"435","FEEDER HOURS":"243"},{"DAY":16,"MACHINE HOURS":"456","FEEDER HOURS":"272"},{"DAY":17,"MACHINE HOURS":"379","FEEDER HOURS":"227"},{"DAY":18,"MACHINE HOURS":"330","FEEDER HOURS":"283"},{"DAY":19,"MACHINE HOURS":"386","FEEDER HOURS":"202"},{"DAY":20,"MACHINE HOURS":"271","FEEDER HOURS":"205"},{"DAY":21,"MACHINE HOURS":"328","FEEDER HOURS":"183"},{"DAY":22,"MACHINE HOURS":"417","FEEDER HOURS":"397"},{"DAY":23,"MACHINE HOURS":"350","FEEDER HOURS":"291"},{"DAY":24,"MACHINE HOURS":"374","FEEDER HOURS":"346"},{"DAY":25,"MACHINE HOURS":"0","FEEDER HOURS":"0"},{"DAY":26,"MACHINE HOURS":"5","FEEDER HOURS":"0"},{"DAY":27,"MACHINE HOURS":"320","FEEDER HOURS":"302"},{"DAY":28,"MACHINE HOURS":"403","FEEDER HOURS":"317"},{"DAY":29,"MACHINE HOURS":"389","FEEDER HOURS":"371"},{"DAY":30,"MACHINE HOURS":"388","FEEDER HOURS":"263"},{"DAY":31,"MACHINE HOURS":"354","FEEDER HOURS":"216"}]

```

I am trying to generate a graph like this one in Dashboard V1 UI Chart:  
 ![Dashboard V1 UI Bar Graph](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/2/720128b14a8fe9b4d20c223a17e02721df6e18e3.png)

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [9 February 2024 08:52 UTC](https://discourse.nodered.org/t/dashboard-2-0-ui-graph-multiple-bars/85336/5 "2024-02-09T08:52:39Z")

</div>

Thanks for the example, a great help. Unfortunately, grouped bar charts aren't _currently_ supported in Dashboard 2.0.

I've opened [UI Chart - Grouped Bar Chart · Issue #559 · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/issues/559) to make sure it's tracked and we can get it in at some point (hopefully soon)

---

<div class="post-metadata">

**Author:** ![jwj001](https://avatars.discourse-cdn.com/v4/letter/j/8e8cbc/32.png) [@jwj001](https://discourse.nodered.org/u/jwj001)\
**Post date:** [9 February 2024 09:22 UTC](https://discourse.nodered.org/t/dashboard-2-0-ui-graph-multiple-bars/85336/6 "2024-02-09T09:22:45Z")

</div>

Hi thank you, is there any other route that i can try to get this working.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [9 February 2024 10:10 UTC](https://discourse.nodered.org/t/dashboard-2-0-ui-graph-multiple-bars/85336/7 "2024-02-09T10:10:43Z")

</div>

It'll be a little hands on, but you could try loading in an external package like echarts into a `ui-template:

- [ECharts Docs](https://echarts.apache.org/en/index.html)
  - Can be imported using [echarts CDN by jsDelivr - A CDN for npm and GitHub](https://www.jsdelivr.com/package/npm/echarts)

- [How to load External Dependencies into UI Template](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html#loading-external-dependencies)

---

<div class="post-metadata">

**Author:** ![jwj001](https://avatars.discourse-cdn.com/v4/letter/j/8e8cbc/32.png) [@jwj001](https://discourse.nodered.org/u/jwj001)\
**Post date:** [9 February 2024 10:11 UTC](https://discourse.nodered.org/t/dashboard-2-0-ui-graph-multiple-bars/85336/8 "2024-02-09T10:11:16Z")

</div>

Thank you, i will look into it

---

<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:** [10 March 2024 10:11 UTC](https://discourse.nodered.org/t/dashboard-2-0-ui-graph-multiple-bars/85336/9 "2024-03-10T10:11:38Z")

</div>

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