Dashboard2 - duplicate values on x axis

Dashboard
1

Can somebody help make a quick example of how I can send data for a graph - in a single message - with duplicate labels on the X axis? I cannot seem to make a timescale graph from a message with an array of data points?

I wish to show the hour of the day on the X axis but often for more than a day, such that some hour "names" are duplicated at the beginning and end of the graph.

For example this doesn't seem to work:

{"id":"5ef1d44eedddfe91","type":"ui-chart","z":"178ed895cc75d9ab","group":"1130e9c196f39867","name":"Plan","label":"Plan","order":2,"chartType":"line","category":"[\"minCharge\", \"normalCharge\", "buy\"]","categoryType":"json","xAxisLabel":"","xAxisProperty":"payload.ts","xAxisPropertyType":"msg","xAxisType":"time","xAxisFormat":"HH","xAxisFormatType":"custom","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"payload","yAxisPropertyType":"msg","ymin":"","ymax":"","bins":10,"action":"replace","stackSeries":false,"pointShape":"false","pointRadius":4,"showLegend":true,"removeOlder":"24","removeOlderUnit":"3600","removeOlderPoints":"33","colors":["#ffd172","#385fff","#cc4c3d","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":"6","height":"4","className":"","interpolation":"linear","x":1230,"y":480,"wires":[[]]},{"id":"4776f55f1c64640c","type":"inject","z":"178ed895cc75d9ab","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"hour\":\"2025012922\",\"ts\":1738188000000,\"shortHour\":\"22\",\"normalCharge\":0,\"minCharge\":0.7,\"buy\":1.4},{\"hour\":\"2025012923\",\"ts\":1738191600000,\"shortHour\":\"23\",\"normalCharge\":0,\"minCharge\":0,\"buy\":1.35},{\"hour\":\"2025013022\",\"ts\":1738274400000,\"shortHour\":\"22\",\"normalCharge\":0,\"minCharge\":0,\"buy\":1.02}]","payloadType":"json","x":1010,"y":480,"wires":[["5ef1d44eedddfe91"]]},{"id":"1130e9c196f39867","type":"ui-group","name":"Plan","page":"ce0fb242887e2cfe","width":"6","height":"1","order":2,"showTitle":false,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"ce0fb242887e2cfe","type":"ui-page","name":"Bil","ui":"391b382dc05b69b2","path":"/car","icon":"car","layout":"grid","theme":"c20a7e20a4e37ad0","breakpoints":[{"name":"Default","px":"0","cols":"6"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":2,"className":"","visible":true,"disabled":false},{"id":"391b382dc05b69b2","type":"ui-base","name":"Dashboard2","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":false,"notificationDisplayTime":"5","showDisconnectNotification":false},{"id":"c20a7e20a4e37ad0","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"6px","groupGap":"6px","groupBorderRadius":"4px","widgetGap":"6px","density":"default"}}]
2

Can you please edit your post so that the code does not get mangled by the forum?

There has to be a line with three backticks before the code and another after it, like this:

image
image299Ă—100 1.43 KB

3

@jbudd: Thanks. I actually tried that, but it didn't work. I guess I did something wrong - works fine now :slight_smile:

4

Do you mean the flow is now importable or that you have solved your problem?

[Edit] It still is not importable for some reason, there is a JSON syntax error. You posted this flow in another post recently and it wasn't importable (by me) then, so something odd is going on.

5

@Colin: don't know what went wrong. It was exported from my Node-Red instance, but doesn't work for me either, now that I tried importing it.

In any case: any suggestions on how to reach my goal of duplicated X-axis labels, would be much appreciated :slight_smile:

I tried again, and this seems to work:

[{"id":"5ef1d44eedddfe91","type":"ui-chart","z":"178ed895cc75d9ab","d":true,"group":"1130e9c196f39867","name":"Plan","label":"Plan","order":2,"chartType":"bar","category":"[\"minCharge\", \"normalCharge\",\"buy\"]","categoryType":"json","xAxisLabel":"","xAxisProperty":"shortHour","xAxisPropertyType":"property","xAxisType":"category","xAxisFormat":"HH","xAxisFormatType":"custom","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"payload","yAxisPropertyType":"msg","ymin":"","ymax":"","bins":10,"action":"replace","stackSeries":false,"pointShape":"false","pointRadius":4,"showLegend":true,"removeOlder":"24","removeOlderUnit":"3600","removeOlderPoints":"33","colors":["#ffd172","#385fff","#cc4c3d","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":"6","height":"4","className":"","interpolation":"linear","x":1230,"y":480,"wires":[[]]},{"id":"4776f55f1c64640c","type":"inject","z":"178ed895cc75d9ab","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"hour\":\"2025012922\",\"ts\":1738188000000,\"shortHour\":\"22\",\"normalCharge\":1,\"minCharge\":0.7,\"buy\":1.4},{\"hour\":\"2025012923\",\"ts\":1738191600000,\"shortHour\":\"23\",\"normalCharge\":2,\"minCharge\":0.3,\"buy\":1.35},{\"hour\":\"2025013022\",\"ts\":1738274400000,\"shortHour\":\"24\",\"normalCharge\":3,\"minCharge\":0.5,\"buy\":1.02}]","payloadType":"json","x":1010,"y":480,"wires":[["5ef1d44eedddfe91"]]},{"id":"1130e9c196f39867","type":"ui-group","name":"Plan","page":"ce0fb242887e2cfe","width":"6","height":"1","order":2,"showTitle":false,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"ce0fb242887e2cfe","type":"ui-page","name":"Bil","ui":"391b382dc05b69b2","path":"/car","icon":"car","layout":"grid","theme":"c20a7e20a4e37ad0","breakpoints":[{"name":"Default","px":"0","cols":"6"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":3,"className":"","visible":true,"disabled":false},{"id":"391b382dc05b69b2","type":"ui-base","name":"Dashboard2","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":false,"notificationDisplayTime":"5","showDisconnectNotification":false},{"id":"c20a7e20a4e37ad0","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"6px","groupGap":"6px","groupBorderRadius":"4px","widgetGap":"6px","density":"default"}}]
6

That works for me

image
image565Ă—234 3.45 KB

7

I have been messing around with it further, but still with no luck.

What I am trying to do with this example is get two of "22" and one of "23". This is a shortened down example of the case of showing all hours for 1.5 days or so, which is what I ultimately need to do.

Updated to better express the exact issue:

[{"id":"4776f55f1c64640c","type":"inject","z":"178ed895cc75d9ab","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"hour\":\"2025012922\",\"ts\":1738188000000,\"shortHour\":\"22\",\"normalCharge\":1,\"minCharge\":0.7,\"buy\":1.4},{\"hour\":\"2025012923\",\"ts\":1738191600000,\"shortHour\":\"23\",\"normalCharge\":2,\"minCharge\":0.3,\"buy\":1.35},{\"hour\":\"2025013022\",\"ts\":1738274400000,\"shortHour\":\"22\",\"normalCharge\":3,\"minCharge\":0.5,\"buy\":1.02}]","payloadType":"json","x":1010,"y":480,"wires":[["5ef1d44eedddfe91"]]},{"id":"5ef1d44eedddfe91","type":"ui-chart","z":"178ed895cc75d9ab","group":"1130e9c196f39867","name":"Plan","label":"Plan","order":2,"chartType":"bar","category":"[\"minCharge\", \"normalCharge\",\"buy\"]","categoryType":"json","xAxisLabel":"","xAxisProperty":"shortHour","xAxisPropertyType":"property","xAxisType":"category","xAxisFormat":"HH","xAxisFormatType":"custom","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"payload","yAxisPropertyType":"msg","ymin":"","ymax":"","bins":10,"action":"replace","stackSeries":false,"pointShape":"false","pointRadius":4,"showLegend":true,"removeOlder":"24","removeOlderUnit":"3600","removeOlderPoints":"33","colors":["#ffd172","#385fff","#cc4c3d","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":"6","height":"4","className":"","interpolation":"linear","x":1230,"y":480,"wires":[[]]},{"id":"1130e9c196f39867","type":"ui-group","name":"Plan","page":"ce0fb242887e2cfe","width":"6","height":"1","order":2,"showTitle":false,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"ce0fb242887e2cfe","type":"ui-page","name":"Bil","ui":"391b382dc05b69b2","path":"/car","icon":"car","layout":"grid","theme":"c20a7e20a4e37ad0","breakpoints":[{"name":"Default","px":"0","cols":"6"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":3,"className":"","visible":true,"disabled":false},{"id":"391b382dc05b69b2","type":"ui-base","name":"Dashboard2","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":false,"notificationDisplayTime":"5","showDisconnectNotification":false},{"id":"c20a7e20a4e37ad0","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"6px","groupGap":"6px","groupBorderRadius":"4px","widgetGap":"6px","density":"default"}}]
8

I think you need to adjust the data so that the x axis key shortHour is unique, otherwise the chart just shows whichever value appears last in the array for each key.

For example, changing it to "22a" and "22b" gives this:

image
image934Ă—330 10.6 KB

9

You could include the day or date in the category.

10

Thanks guys. I know about the possibility to add more to the label.

I am trying to port from Dashboard 1 to Dashboard 2, and am looking for a way to repeat the labels, instead of adding to them :slight_smile:

But perhaps this specific details is just impossible to port to D2?

11

If D1 bar chart did allow repeated categories then you could submit a feature request, pointing out that this is for compatibility with D1, but I suspect that it is likely to be a low priority as I know the developers are snowed under with work. If, however, you were able to submit a Pull Request to implement it (after checking that it would be accepted) then that could solve your problem.

If you did submit a feature request then I suggest you include the flow you posted showing the problem, and a D1 flow showing how D1 supported the feature.

1 Like