Bar chart with repeated X-values

[qabi]

Description

Not sure if this is considered a bug or feature request.

I want to show a bar (or line) chart with duplicated X-values (labels).

This is actually showing hours on the X-axis, and the scope is the hours of today and tomorrow. I prefer to just show the hours like "00"-"23". So duplicate X-values (labels) will occur.

This currently does not work, as the second occurrence of a given duplicated hour, seems to overwrite the first occurrence.

I do have unique X (time)-related values on each input object. So if one property could be used as the X-value and another as the X-label, that would be really nice. Or some other way to achieve this :)

Have you provided an initial effort estimate for this issue?

I am no FlowFuse team member

[bartbutenaers]

@qabi,

Could you please share a simple example flow (i.e. an inject node and a chart node) that allows people to reproduce your problem quickly. Thanks!

Indeed like you say the ui-chart node first searches whether the x-axis value already exists, and if it already exists it will replace the old y-axis value by the new one.

However I would have expected that it would be possible when you inject unique timestamp x-axis values, which you display as duplicate labels via the format property:

Because that format is passed in the frontend code to the ChartJs library as display format. Which I would expect to be just a visual label that can contain duplicate values like you require.

But from your explanation I assume it doesn't work like that?

Bart

[qabi]

Simpler, cut-down, demonstration of problem.

graph.json

For the bar chart I don't get the Timescale or Format options. When I try it with a line chart (using added unique timestamps and formatting) I get a whole lot of nothing :)

[graph_timescale.json](https://github.com/user-attachments/files/18614310/graph_timescale.json)

It would be great if the chart could display the actual objects given, regardless of X-key being duplicated :)

[joepavitt]

Bar charts are not possible for timeseries x-axes as there is no way to know how wide a bar should be. Only line and scatter charts, where a singular point can be plotted, support timeseries x-axis currently.

[qabi]

Bar charts are not possible for timeseries x-axes as there is no way to know how wide a bar should be. Only line and scatter charts, where a singular point can be plotted, support timeseries x-axis currently.

Right, and timescale is also not what is needed in this case.

Essentially I cannot migrate from Dashboard1, since I cannot get duplicated X-values (labels). So I have to limit the data, until this might possibly change in the Dashboard2 graph node.

[joepavitt]

Thanks for clarifying, what are you hoping to use for your x-axis labels? Surely having the same label for more than one bar renders the chart unhelpful?

[qabi]

Thanks for clarifying, what are you hoping to use for your x-axis labels? Surely having the same label for more than one bar renders the chart unhelpful?

The X axis is hours in the day. So 00-23. But the length of the graph varies from about 7 hours to about 33 hours. (Showing things like electricity prices, expected consumption, etc.)

00-23 is a sufficient and intuitive shorthand for getting an overview of - typically - the rest of today, and all of tomorrow. Especially if the bars are quite narrow, and labels like "Thu 23" or "10-23" take up unnecessary space.

[colinl]

To get something like what you want, rather than feed in the hours for the x axis, set the x axis to timestamp type and feed in the full date/time. Then tell it to format the timestamp as HH so it only shows the hours.

[colinl]

For example, here is a chart configured to show the minutes only (Format mm)

[{"id":"697fe7d376b78127","type":"ui-chart","z":"997da33a0beedade","group":"4f87bd59a15b847e","name":"minutes chart","label":"chart","order":9007199254740991,"chartType":"line","category":"topic","categoryType":"msg","xAxisLabel":"","xAxisProperty":"","xAxisPropertyType":"timestamp","xAxisType":"time","xAxisFormat":"mm","xAxisFormatType":"custom","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"payload","yAxisPropertyType":"msg","ymin":"0","ymax":"1000","bins":10,"action":"append","stackSeries":false,"pointShape":"false","pointRadius":4,"showLegend":true,"removeOlder":"24","removeOlderUnit":"60","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":6,"height":"4","className":"","interpolation":"linear","x":1160,"y":1860,"wires":[[]]},{"id":"1067faa25bb8e8b0","type":"function","z":"997da33a0beedade","name":"function 1","func":"msg.payload = msg.payload / 1000 %1000\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":960,"y":1860,"wires":[["73e224fd383e4f09","697fe7d376b78127"]]},{"id":"e66be00e371bd665","type":"inject","z":"997da33a0beedade","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"5","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":810,"y":1860,"wires":[["1067faa25bb8e8b0"]]},{"id":"73e224fd383e4f09","type":"debug","z":"997da33a0beedade","name":"debug 6","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":1060,"y":1940,"wires":[]},{"id":"4f87bd59a15b847e","type":"ui-group","name":"test","page":"c6ff182a4185f2f2","width":"6","height":"1","order":1,"showTitle":false,"className":"","visible":"true","disabled":"false"},{"id":"c6ff182a4185f2f2","type":"ui-page","name":"Test page","ui":"ID-BASE-1","path":"/testpage","icon":"home","layout":"grid","theme":"f9b6670b127dc219","order":2,"className":"","visible":"true","disabled":"false"},{"id":"ID-BASE-1","type":"ui-base","name":"Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-control","ui-notification","ui-gauge-classic"],"titleBarStyle":"default"},{"id":"f9b6670b127dc219","type":"ui-theme","name":"FlowForge Theme","colors":{"surface":"#152a47","primary":"#005aff","bgPage":"#ffffff","groupBg":"#ffffff","groupOutline":"#cc3e3e"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

[qabi]

To get something like what you want, rather than feed in the hours for the x axis, set the x axis to timestamp type and feed in the full date/time. Then tell it to format the timestamp as HH so it only shows the hours.

Thanks.

I think I tried that and it didn't work, but I am not absolutely sure. Your example did not work at first glance in my setup. Not sure why.

I tried something similar, but with the entire data in a single message (calculated data to show the past, current and future), and cannot get it to work as desired.

And as discussed above this is not possible with the bar chart, at all, if I understand correctly?

[colinl]

Your example did not work at first glance in my setup

In what way? Are you using the latest version of the dashboard?

[colinl]

And as discussed above this is not possible with the bar chart, at all, if I understand correctly?

For some inexplicable reason I thought you wanted a line chart!

[qabi]

In what way? Are you using the latest version of the dashboard?

Using 1.22.1. No data shown in graph. I did not dig into why that might be.