Line Chart X-axis Label Format

General
1

Hello,

Found a few threads on X-axis label format for the Line Chart but these were not exactly aligned to my needs or my understanding was constrained. The documentation states:

The axis labels can be formatted using a Moment.js time formatted string.

I would like to use the following:

moment().format("H");

Where do I set/pass this code, please? Thanks.

2

You can setup the string in the configuration dialog of the chart node.

a-01
a-01631Ă—644 24.5 KB

3

@Andrei, many, many thanks!!! My senility and poor eyesight (went for an eye exam last week!) must take the blame. Just don't know what I was look at at the Settings page before I posted my request.

Have a nice weekend! Regards.

4

@Andrei,

Self-rationalization here: I was looking at the bar chart (I'd like to use the X-axis as a time series discrete values and didn't see the label control to set the custom property). Hence the haste to post my original question. But since I have your attention, here is another one! Thanks. :grinning:

It seems that the bar chart assumes x-axis is for categories. Is there any setting to change this interpretation such that successively values are treated as time series?

Kind regards.

1 Like
5

Can you open it up a bit more - what kind of data you want to display and what must the chart tell to you. (as for main reason of charting is comparing some values against something)

6

Sure,

I'm retrieving OpenWeatherMap rainfall data (hourly interval). I would like to display each rainfall data point as a bar (instead of a dot or connected line) for visual appeal. The other variables in the data are being represented as line charts (except for wind which is another red herring that I would like to avoid for now) as expected (and formatted to my custom expectations thanks to your earlier feedback).

Using a bar chart as a surrogate for hourly rainfall is better eye candy for my purpose. Helps me glance at volume over time.

Of course, please feel free to suggest a better/alternate approach especially if I am doing something that is flawed.

Kind regards.

7

What you want is perfectly doable and will generate a nice bar chart indeed.

In order to populate the x-axis you will need to format the dataset to load time values as the "labels".

For instance, this msg.payload

[{
    "series": ["X", "Y", "Z" ],
    "data": [ [5,6,9], [3,8,5], [6,7,2] ],
    "labels": [ "Jan", "Feb", "Mar" ]
}]

Will generate this bar chart

barchart-01
barchart-01809Ă—514 4.16 KB

Another good example is the one that @hotNipi posted here:

1 Like
8

Thanks again! It is becoming a little clearer thanks to your indulgence.

I'm assuming that the array representation is optional since I'll feed one point every hour (and the chart will retain previously values per whatever settings I have chosen). The key here would be (for me) to format the labels ("H" as you suggested previously) before the feed.

[{
    "series": ["rainfall"],
    "data": [ [6] ],
    "labels": [ "<hourstamp - formatted>" ]
}]

Kind regards.

9

There is a little custom chart node I created lately, which may also be suitable for your task.
https://flows.nodered.org/node/node-red-contrib-ui-statechart

1 Like
10

@hotNipi, yes your statechart node is nice on the eyes and I will definitely try it out.

Kind regards.

11

Hello @Andrei,

I totally missed the role of the chart node here in the Dashboard family! :grinning: I get it now. Just like folks who mix metaphors, I mixed up my understanding of these nodes because I wasn't looking at the usage under Node-RED correctly. I had my spreadsheet lenses turned on.

Thanks for your patience and understanding.

Kind regards.

12

Hi @baqwas, I found this use case interesting as I never needed to build a bar chart from live data (it is quite common to build line charts with live data). So, after revisiting the documentation my understanding is that you indeed need to format the labels before you feed the data. By doing that you will get the x-axis perfectly ordered (from 00 hours to 23 hours). I put a flow that show the difference between two bar charts. When you inject the values in a random way you will see the difference during the chart drawing.

[{"id":"754c42dd.02afac","type":"tab","label":"Bar chart - Live data","disabled":false,"info":""},{"id":"c2fe955a.59f8a8","type":"inject","z":"754c42dd.02afac","name":"","topic":"00","payload":"5","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":140,"wires":[["56c8ff44.a0d05"]]},{"id":"b1d037a.54011c8","type":"inject","z":"754c42dd.02afac","name":"","topic":"01","payload":"10","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":180,"wires":[["56c8ff44.a0d05"]]},{"id":"c28ed217.17b2b","type":"inject","z":"754c42dd.02afac","name":"","topic":"02","payload":"20","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":220,"wires":[["56c8ff44.a0d05"]]},{"id":"143125bc.30ef2a","type":"inject","z":"754c42dd.02afac","name":"","topic":"03","payload":"30","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":260,"wires":[["56c8ff44.a0d05"]]},{"id":"6880757d.17529c","type":"inject","z":"754c42dd.02afac","name":"","topic":"04","payload":"40","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":300,"wires":[["56c8ff44.a0d05"]]},{"id":"f5838e8.c35487","type":"ui_chart","z":"754c42dd.02afac","name":"","group":"d4cc65a.8bf5b98","order":6,"width":0,"height":0,"label":"1 - Bar Chart - Live Data","chartType":"bar","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"0","ymax":"60","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"colors":["#ff8040","#0000ff","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":810,"y":240,"wires":[["53d9b4d5.c704ac"]]},{"id":"589393f1.7dae0c","type":"link in","z":"754c42dd.02afac","name":"","links":["56c8ff44.a0d05"],"x":395,"y":240,"wires":[["d92c9117.2e7e6"]]},{"id":"56c8ff44.a0d05","type":"link out","z":"754c42dd.02afac","name":"","links":["589393f1.7dae0c"],"x":335,"y":240,"wires":[]},{"id":"6527bad7.947af4","type":"inject","z":"754c42dd.02afac","name":"","topic":"01","payload":"60","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":340,"wires":[["56c8ff44.a0d05"]]},{"id":"2690282b.d85878","type":"inject","z":"754c42dd.02afac","name":"","topic":"","payload":"[]","payloadType":"json","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":530,"y":160,"wires":[["f5838e8.c35487"]]},{"id":"697d8c5f.d17054","type":"comment","z":"754c42dd.02afac","name":"Without formatting the x-axis","info":"","x":240,"y":80,"wires":[]},{"id":"421764e1.8f80dc","type":"inject","z":"754c42dd.02afac","name":"","topic":"00","payload":"5","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":540,"wires":[["5b6a900a.fc63"]]},{"id":"c0bcafde.4bea","type":"inject","z":"754c42dd.02afac","name":"","topic":"01","payload":"10","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":580,"wires":[["5b6a900a.fc63"]]},{"id":"88985614.df2038","type":"inject","z":"754c42dd.02afac","name":"","topic":"02","payload":"20","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":620,"wires":[["5b6a900a.fc63"]]},{"id":"1a8a66a6.42ec49","type":"inject","z":"754c42dd.02afac","name":"","topic":"03","payload":"30","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":660,"wires":[["5b6a900a.fc63"]]},{"id":"7b93fdd3.8774d4","type":"inject","z":"754c42dd.02afac","name":"","topic":"04","payload":"40","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":700,"wires":[["5b6a900a.fc63"]]},{"id":"5a9cd277.b0564c","type":"ui_chart","z":"754c42dd.02afac","name":"","group":"d4cc65a.8bf5b98","order":6,"width":0,"height":0,"label":"2- Bar Chart - Live Data","chartType":"bar","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"0","ymax":"60","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"colors":["#ff8040","#0000ff","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":810,"y":640,"wires":[["d029554c.98f4a8"]]},{"id":"9bedcc0a.1f9a6","type":"link in","z":"754c42dd.02afac","name":"","links":["5b6a900a.fc63"],"x":395,"y":640,"wires":[["3b2dbbff.7e7df4"]]},{"id":"5b6a900a.fc63","type":"link out","z":"754c42dd.02afac","name":"","links":["9bedcc0a.1f9a6"],"x":335,"y":640,"wires":[]},{"id":"57565930.4b7498","type":"inject","z":"754c42dd.02afac","name":"","topic":"01","payload":"60","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":740,"wires":[["5b6a900a.fc63"]]},{"id":"f73b6177.38e8e","type":"comment","z":"754c42dd.02afac","name":"Pre formatting the x-axis","info":"","x":230,"y":440,"wires":[]},{"id":"42bc501e.6f2b6","type":"inject","z":"754c42dd.02afac","name":"","topic":"","payload":"go","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"0.3","x":430,"y":540,"wires":[["12be8fc4.499a6"]]},{"id":"53d9b4d5.c704ac","type":"debug","z":"754c42dd.02afac","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":1010,"y":240,"wires":[]},{"id":"12be8fc4.499a6","type":"function","z":"754c42dd.02afac","name":"Format Data","func":"\nlet array0 = Array(24).fill(0);\nlet arrayhours = [ \"00\", \"01\", \"02\", \"03\", \"04\", \"05\", \"06\",\"07\", \"08\", \"09\", \"10\", \"11\", \"12\", \"13\",\"14\", \"15\", \"16\", \"17\", \"18\", \"19\", \"20\", \"21\", \"22\", \"23\"]\n\nmsg.payload = \n[{\n    \"series\": [ \"rainfall\" ],\n    \"data\": [ array0 ],\n    \"labels\": arrayhours\n}];\nreturn msg;","outputs":1,"noerr":0,"x":570,"y":540,"wires":[["5a9cd277.b0564c"]]},{"id":"d029554c.98f4a8","type":"debug","z":"754c42dd.02afac","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":1010,"y":640,"wires":[]},{"id":"d92c9117.2e7e6","type":"change","z":"754c42dd.02afac","name":"","rules":[{"t":"set","p":"ui_control","pt":"msg","to":"{\"options\":{\"scales\":{\"xAxes\":[{\"barThickness\":15}],\"yAxes\":[{\"ticks\":{\"suggestedMin\":0}}]}}}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":550,"y":240,"wires":[["f5838e8.c35487"]]},{"id":"3b2dbbff.7e7df4","type":"change","z":"754c42dd.02afac","name":"","rules":[{"t":"set","p":"ui_control","pt":"msg","to":"{\"options\":{\"scales\":{\"xAxes\":[{\"barThickness\":15}],\"yAxes\":[{\"ticks\":{\"suggestedMin\":0}}]}}}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":550,"y":640,"wires":[["5a9cd277.b0564c"]]},{"id":"d4cc65a.8bf5b98","type":"ui_group","z":"","name":"Group 1","tab":"90c6a3a3.ea2ca","disp":true,"width":"12","collapse":false},{"id":"90c6a3a3.ea2ca","type":"ui_tab","z":"","name":"Tab1","icon":"dashboard","order":3}]

barchart-04
barchart-04651Ă—814 16 KB

13

Thx, @Andrei. You hit the nail on the head with your solution. The two use cases that I have in mind are:

  1. Rainfall data (which is my current focus)

  2. Transaction volume (for future finance data scraping)

In both cases, I would prefer to avoid storing "public" data since I could retrieve these later easily if I needed them for analysis purposes. This would keep my solution simple. On the other hand, of course, I've completed the telemetry logging rites of passage (for in-house sensor data) with different combinations before rendering the trend from database to the dashboard. In fact, checking my notes, I found out that you had helped me previously with line charts! :grinning:

Kind regards.

1 Like