Ui_chart: Formatting date for stacked bar chart

Hello - I displaying a chart in the dashboard that fetches data from a mySQL database and using it to create a stacked bar chart. The X-axes is the date. Currently, my dates are showing in UTC format ("2022-01-07T06:00:00.000Z") and I am trying to get them to "Jan-01" format in my current timezone. I know I can "parse" the date string to get the date, but it would be from the wrong timezone. I have searched the forums and have not found a way to deal with this particular issue.

This is what the chart looks like currently.

The help text on ui_chart indicates that I can use the Moment.js library but I can't seem to use it in a function node (I do use the moment node in other situations but I don't think I can use it here without a lot of overhead). The data is stored in a mySQL database in the correct timezone but is converted to UTC when bringing it into Node-RED.

The formatted data is included in the flow below:

[{"id":"92bcfae9.7309","type":"inject","z":"3fad0f28.757898","name":"","props":[{"p":"payload"},{"p":"ui_control","v":"{\"options\":{\"scales\":{\"xAxes\":[{\"stacked\":true}],\"yAxes\":[{\"stacked\":true}]}}}","vt":"json"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"series\":[\"To Home\",\"To Grid\",\"To Battery\"],\"data\":[[0,25.24,4.92,11.56,23.16,21.54,21.84,20.23,19.4,12.58,25.25,21.11,20.73,12.81,20.01,25.27,27.18,21.15,16.26],[0,0.01,0,0,0.02,0.01,0.02,0.05,0.02,0,0.04,0.05,0.02,0.01,0,0.02,0.05,0.03,0.01],[0,7.81,0.68,1.04,10.44,11.31,11.47,12.5,9.5,0.72,10.12,13.72,11.7,2.4,2.47,12.16,9.53,14.83,1.16]],\"labels\":[\"2022-01-07T06:00:00.000Z\",\"2022-01-07T06:00:00.000Z\",\"2022-01-08T06:00:00.000Z\",\"2022-01-09T06:00:00.000Z\",\"2022-01-10T06:00:00.000Z\",\"2022-01-11T06:00:00.000Z\",\"2022-01-12T06:00:00.000Z\",\"2022-01-13T06:00:00.000Z\",\"2022-01-14T06:00:00.000Z\",\"2022-01-15T06:00:00.000Z\",\"2022-01-16T06:00:00.000Z\",\"2022-01-17T06:00:00.000Z\",\"2022-01-18T06:00:00.000Z\",\"2022-01-19T06:00:00.000Z\",\"2022-01-20T06:00:00.000Z\",\"2022-01-21T06:00:00.000Z\",\"2022-01-22T06:00:00.000Z\",\"2022-01-23T06:00:00.000Z\",\"2022-01-24T06:00:00.000Z\"]}]","payloadType":"json","x":1978.3333740234375,"y":1446.0000610351562,"wires":[["e0bd4f29.4f94c8"]]},{"id":"e0bd4f29.4f94c8","type":"ui_chart","z":"3fad0f28.757898","name":"Solar Chart","group":"6a5e7470.21ed8c","order":3,"width":"26","height":"10","label":"Solar Chart","chartType":"bar","legend":"true","xformat":"D/M","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"className":"","x":2195.3336181640625,"y":1451.6666870117188,"wires":[[]]},{"id":"6a5e7470.21ed8c","type":"ui_group","name":"Date Range","tab":"660a703d.ea902","order":2,"disp":true,"width":"26","collapse":false,"className":""},{"id":"660a703d.ea902","type":"ui_tab","name":"Tesla Stats","icon":"dashboard","order":25,"disabled":false,"hidden":false}]

Any guidance would be really appreciated. Thanks for your help.

I think that refers to the x axis, and not bar charts.

You could use moments to format your labels with a change node and JSONata
e.g.

[{"id":"92bcfae9.7309","type":"inject","z":"c791cbc0.84f648","name":"","props":[{"p":"payload"},{"p":"ui_control","v":"{\"options\":{\"xformat\":\"HH:mm\",\"scales\":{\"xAxes\":[{\"stacked\":true}],\"yAxes\":[{\"stacked\":true}]}}}","vt":"json"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"series\":[\"To Home\",\"To Grid\",\"To Battery\"],\"data\":[[0,25.24,4.92,11.56,23.16,21.54,21.84,20.23,19.4,12.58,25.25,21.11,20.73,12.81,20.01,25.27,27.18,21.15,16.26],[0,0.01,0,0,0.02,0.01,0.02,0.05,0.02,0,0.04,0.05,0.02,0.01,0,0.02,0.05,0.03,0.01],[0,7.81,0.68,1.04,10.44,11.31,11.47,12.5,9.5,0.72,10.12,13.72,11.7,2.4,2.47,12.16,9.53,14.83,1.16]],\"labels\":[\"2022-01-07T06:00:00.000Z\",\"2022-01-07T06:00:00.000Z\",\"2022-01-08T06:00:00.000Z\",\"2022-01-09T06:00:00.000Z\",\"2022-01-10T06:00:00.000Z\",\"2022-01-11T06:00:00.000Z\",\"2022-01-12T06:00:00.000Z\",\"2022-01-13T06:00:00.000Z\",\"2022-01-14T06:00:00.000Z\",\"2022-01-15T06:00:00.000Z\",\"2022-01-16T06:00:00.000Z\",\"2022-01-17T06:00:00.000Z\",\"2022-01-18T06:00:00.000Z\",\"2022-01-19T06:00:00.000Z\",\"2022-01-20T06:00:00.000Z\",\"2022-01-21T06:00:00.000Z\",\"2022-01-22T06:00:00.000Z\",\"2022-01-23T06:00:00.000Z\",\"2022-01-24T06:00:00.000Z\"]}]","payloadType":"json","x":130,"y":1780,"wires":[["1939ea8f.92a37d"]]},{"id":"1939ea8f.92a37d","type":"change","z":"c791cbc0.84f648","name":"","rules":[{"t":"set","p":"payload[0].labels","pt":"msg","to":"payload[0].labels.$moment($).tz(\"Europe/London\").format(\"MMM DD\")","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":320,"y":1840,"wires":[["e0bd4f29.4f94c8"]]},{"id":"e0bd4f29.4f94c8","type":"ui_chart","z":"c791cbc0.84f648","name":"Solar Chart","group":"b9d366f18ff7ae74","order":3,"width":"12","height":"9","label":"Solar Chart","chartType":"bar","legend":"true","xformat":"D/M","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"className":"","x":487.000244140625,"y":1785.6666259765625,"wires":[[]]},{"id":"b9d366f18ff7ae74","type":"ui_group","name":"test","tab":"ffba43d73860d25d","order":1,"disp":true,"width":12,"collapse":false},{"id":"ffba43d73860d25d","type":"ui_tab","name":"Level","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

Thank you! That works perfectly (and I can use this in other places as well).

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