hello , i have a probleme how i can show the time in bar chart in form 00:00 no like a timestamp , i use Dashboard2.0
thanks
Welcome to the forum @fares-31.
I take it that you want to use the time as values on the x axis?
The people who designed the chart node decided not to permit a time series x axis for bar charts.
Therefore you have to modify your data to include an 'hhmm' property, something like this.
[{"id":"bc419791dbc1b6a9","type":"inject","z":"13b5fde31520ce30","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"timestamp\":\"2025-05-06T21:00:00Z\",\"rain\":0},{\"timestamp\":\"2025-05-06T22:00:00Z\",\"rain\":2},{\"timestamp\":\"2025-05-06T23:00:00Z\",\"rain\":5},{\"timestamp\":\"2025-05-07T00:00:00Z\",\"rain\":0.8},{\"timestamp\":\"2025-05-07T01:00:00Z\",\"rain\":2.3},{\"timestamp\":\"2025-05-07T02:00:00Z\",\"rain\":0}]","payloadType":"json","x":130,"y":240,"wires":[["e8afad4dd772ef29","703b04f279d60164"]]},{"id":"e8afad4dd772ef29","type":"function","z":"13b5fde31520ce30","name":"Massage data","func":"let newarray = []\nfunction myFunction(value, index, array) {\n const ts = dayjs(value.timestamp)\n const obj = {\n \"timestamp\": value.timestamp,\n \"hhmm\": ts.format(\"HH:mm\"),\n \"rain\": value.rain\n }\n newarray.push(obj)\n}\n\nmsg.payload.forEach (myFunction)\nmsg.payload = newarray\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[{"var":"dayjs","module":"dayjs"}],"x":360,"y":240,"wires":[["97a7a7ea61c62fc8","104aa1db5f766cfc"]]},{"id":"703b04f279d60164","type":"debug","z":"13b5fde31520ce30","name":"Initial data","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":350,"y":200,"wires":[]},{"id":"97a7a7ea61c62fc8","type":"debug","z":"13b5fde31520ce30","name":"After tweeking","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":560,"y":200,"wires":[]},{"id":"104aa1db5f766cfc","type":"ui-chart","z":"13b5fde31520ce30","group":"199e82c06c940c15","name":"","label":"chart","order":1,"chartType":"bar","category":"Rain","categoryType":"str","xAxisLabel":"","xAxisProperty":"hhmm","xAxisPropertyType":"property","xAxisType":"category","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"rain","yAxisPropertyType":"property","ymin":"","ymax":"","bins":10,"action":"append","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":true,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":6,"height":8,"className":"","interpolation":"linear","x":550,"y":240,"wires":[[]]},{"id":"199e82c06c940c15","type":"ui-group","name":"demo","page":"77500c8ea3b3a5f1","width":6,"height":1,"order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"77500c8ea3b3a5f1","type":"ui-page","name":"demo","ui":"1c04b4a304525cb6","path":"/demo","icon":"home","layout":"grid","theme":"b7c3b034620d3931","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":"1c04b4a304525cb6","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"headerContent":"page","navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":1,"showDisconnectNotification":true,"allowInstall":true},{"id":"b7c3b034620d3931","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094CE","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
Here is the debug output
You can see that the value of hhmm is one hour out!
It's something to do with the fact I am in BST here, 1 hour ahead of Zulu time.
You'll need to do some research on the day.js library and fix this!
Here is the resulting chart.
1 Like
I need a nother way
Can you don your mail @jbudd
No. Use the forum. That's what it's for. Any responses in public here might be helpful to other users with the same problem.
oky , but i need the code of function
I have given you the code for a working example.
Did you try copying the code using this button and importing it into Node-red?
sir , i need your mail is important thnig please h
@fares-31 Please keep all correspondence in the public forum then everybody can both help and learn from it.
1 Like
Here is how to impot jbudds example How to import/export a flow
