Dashboard 2.0 ui Graph Multiple Bars

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. ..

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"] };
// Assign the array of objects to msg.payload
msg.payload = arrayOfObjects;
// Return the modified message object
return msg; 

UI Graph Node setup:

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

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

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.

1 Like

Hi Joepavitt

Here is my output for sql.

[{"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

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 to make sure it's tracked and we can get it in at some point (hopefully soon)

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

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

Thank you, i will look into it