Bar charts & time based x axis

Dashboard
1

I am using @flowfuse/node-red-dashboard v1.18.1.
Here is a line chart showing a simple dataset

image
image453Ă—283 10.2 KB

Because it's a line chart I can set the x axis type as timescale and format it as dd MMM

However if I change it to a bar chart, the only x axis type available is "Categorical" & I get this.

image
image462Ă—289 6.03 KB

  • Way too much screen space is allocated to the UTC timestamp.
  • It is impossible to tell which timestamp relates to which bar.
  • There is no obvious way to format the axis labels as dd MMM

I think it's a mistake for a bar chart to disallow timescale type x axis.

This was discussed in https://discourse.nodered.org/t/visualizing-numerical-data-on-bar-chart-with-x-axis-type-set-as-on-timestamp/90997 and Closed as completed on September 18.

Did this not get released with v 1.18?

2

It was closed as a duplicate of Support "Linear" & "Timescale" x-axis on a bar chart · Issue #1045 · FlowFuse/node-red-dashboard · GitHub

So the issue remains open and it's a flaw with the underlying ChartJS library which doesn't support timestamp x-axis on bar charts :man_facepalming:

3

Do you have any idea if/when the library will be fixed Joe?

In the meantime, should the widget be modified to allow formatting timestamps for more chart types (before passing the data to chartjs)?

4

ChartJS mutates anything it's given, so it's got to be at that chart level.

Will very heavily depend on how quickly we can hire for the newly announced position we are recruiting for: Job Opening - Front-End Engineer, Node-RED Dashboard 2.0 • FlowFuse

That will be someone to work on Dashboard full-time and help us get through the growing list of Feature Requests

1 Like
5

I can see that the library might "helpfully" reformat 1730193140000 as "2024-10-29T09:12:20.000Z" but if the widget passed it "4th July", how would it know to reformat that as a timestamp?

Edit - My data comes from an SQL query so I can offload the issue to the database:

SELECT ... , DATE_FORMAT(b.timestamp, "%d %b") as timestamp ...

image
image461Ă—280 4.18 KB

6

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