Fixed x-axis range

Dashboard
1

tl;dr How to create a line chart with a fixed x-axis range covering 24 hours. /tl;dr

Hi, I'm trying to show the data obtained from several sensors in two line charts. One sensor group is related to input, the other one to output. I'd like to show two line charts on one dashboard page - one for the input data and one for the output data - so that it's easy to correlate input and output measurements.

This works so far but my problem is that the x-axis range of both line charts is not in sync, as a day's first input data arrives way before the first output data. The line chart's default behaviour seems to be to show as much data as possible, starting with the first data point to the left and the last data point to the right (with some padding at the edges).
What I want is two line charts each starting and ending at the same time, so that both show a full day, independent when the first and last measurement arrives.

2

Try sending a null payload to the output chart at the same time as your first input data.

Or have both lines on the same chart.

3

Thx for the reply, but that wouldn't give me a 24 hours display either.

4

You probably need to provide more info on timing of messages.
You could try joining the messages then complete the join when the output arrives.
Here is an example, I have guessed and simulated the input readings.

[{"id":"78671b273c416549","type":"inject","z":"b9860b4b9de8c8da","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"60","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":390,"y":4720,"wires":[["17c2d5ced75a16b4"]]},{"id":"17c2d5ced75a16b4","type":"trigger","z":"b9860b4b9de8c8da","name":"","op1":"1","op2":"0","op1type":"str","op2type":"str","duration":"250","extend":false,"overrideDelay":false,"units":"ms","reset":"","bytopic":"all","topic":"topic","outputs":2,"x":540,"y":4720,"wires":[["e4178bebae0caba1"],["588db0ca81e63433"]]},{"id":"588db0ca81e63433","type":"delay","z":"b9860b4b9de8c8da","name":"","pauseType":"random","timeout":"5","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"10","randomLast":"30","randomUnits":"seconds","drop":false,"allowrate":false,"outputs":1,"x":700,"y":4760,"wires":[["4798e17dd1755b31"]]},{"id":"e4178bebae0caba1","type":"change","z":"b9860b4b9de8c8da","name":"simulate input","rules":[{"t":"set","p":"payload","pt":"msg","to":"$round($random()*10)","tot":"jsonata"},{"t":"set","p":"topic","pt":"msg","to":"input","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":780,"y":4680,"wires":[["ffbd4c53a8ec96f3"]]},{"id":"4798e17dd1755b31","type":"change","z":"b9860b4b9de8c8da","name":"simulate output","rules":[{"t":"set","p":"payload","pt":"msg","to":"$round($random()*10)","tot":"jsonata"},{"t":"set","p":"topic","pt":"msg","to":"output","tot":"str"},{"t":"set","p":"complete","pt":"msg","to":"true","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":860,"y":4760,"wires":[["ffbd4c53a8ec96f3"]]},{"id":"ffbd4c53a8ec96f3","type":"join","z":"b9860b4b9de8c8da","name":"","mode":"custom","build":"object","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":false,"timeout":"","count":"","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"","reduceFixup":"","x":430,"y":4880,"wires":[["5a057a5827bb602f"]]},{"id":"5a057a5827bb602f","type":"split","z":"b9860b4b9de8c8da","name":"","splt":"\\n","spltType":"str","arraySplt":1,"arraySpltType":"len","stream":false,"addname":"topic","x":590,"y":4880,"wires":[["fb01335ad7993c5b","547648db60bbb50e"]]},{"id":"fb01335ad7993c5b","type":"ui_chart","z":"b9860b4b9de8c8da","name":"","group":"2d4fe667.28f8ba","order":24,"width":0,"height":0,"label":"chart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":"24","removeOlderPoints":"100","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"className":"","x":750,"y":4880,"wires":[[]]},{"id":"547648db60bbb50e","type":"debug","z":"b9860b4b9de8c8da","name":"debug 316","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":790,"y":4840,"wires":[]},{"id":"2d4fe667.28f8ba","type":"ui_group","name":"demo","tab":"1caa8458.b17814","order":2,"disp":true,"width":"12","collapse":false,"className":""},{"id":"1caa8458.b17814","type":"ui_tab","name":"Demo","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
5

Thx for your answer.

The input messages are timestamped solar power measurements, starting somewhere around 5 a.m. and the output messages are timestamped power consumption measurements and other sensor data. Parts of those arrive during the night.
Currently I insert each received message into one of two arrays which themself are stored in the context. The arrays get purged at midnight, so every day the system starts over.

What I want is just a fixed range of 00:00 to 23:59 every day in both line charts.

6

Your context variable could store datetime, value pairs with the value being null for times in the future.
Instead of a "live data" graph, whenever new data arrives, update the context and send it as a "stored data" chart. for the whole day.

7

You can preset the chart timescale in a live feed chart by feeding in a stored data chart at midnight, containing two null data object values and a different topic.
e.g

[{"id":"6f7c79357f2f23d5","type":"inject","z":"b9860b4b9de8c8da","name":"reset midnight","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"00 00 * * *","once":true,"onceDelay":0.1,"topic":"any_name","payload":"1","payloadType":"num","x":420,"y":4620,"wires":[["bd44f1197a5c3b20"]]},{"id":"bd44f1197a5c3b20","type":"change","z":"b9860b4b9de8c8da","name":"simulate output","rules":[{"t":"set","p":"timestamp","pt":"msg","to":"","tot":"date"},{"t":"set","p":"payload","pt":"msg","to":"[\t   {\t       \"series\":[$$.topic],\t       \"data\":[\t           [\t                {\"x\":$$.timestamp,\"y\":null},\t                {\"x\":$$.timestamp + $$.payload * 3540000,\"y\":null}\t            ]\t       ]\t   }\t]","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":660,"y":4620,"wires":[["42215a696cc6c3f9","e06d1d87b8add7cb","40f75ba563bdf7af"]]},{"id":"42215a696cc6c3f9","type":"ui_chart","z":"b9860b4b9de8c8da","name":"","group":"2d4fe667.28f8ba","order":24,"width":0,"height":0,"label":"Input","chartType":"line","legend":"false","xformat":"HH:mm","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":"24","removeOlderPoints":"100","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"className":"","x":790,"y":4680,"wires":[["e7781b7b333c3c9c"]]},{"id":"e06d1d87b8add7cb","type":"debug","z":"b9860b4b9de8c8da","name":"debug 317","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":930,"y":4580,"wires":[]},{"id":"40f75ba563bdf7af","type":"ui_chart","z":"b9860b4b9de8c8da","name":"","group":"2d4fe667.28f8ba","order":24,"width":0,"height":0,"label":"Output","chartType":"line","legend":"false","xformat":"HH:mm","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":"24","removeOlderPoints":"100","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"className":"","x":790,"y":4720,"wires":[[]]},{"id":"9fd8236908d9e652","type":"inject","z":"b9860b4b9de8c8da","name":"input","props":[{"p":"payload"},{"p":"topic","vt":"str"},{"p":"timestamp","v":"","vt":"date"}],"repeat":"120","crontab":"","once":false,"onceDelay":0.1,"topic":"input","payload":"$round($random()*10)","payloadType":"jsonata","x":410,"y":4680,"wires":[["42215a696cc6c3f9"]]},{"id":"e7781b7b333c3c9c","type":"debug","z":"b9860b4b9de8c8da","name":"debug 316","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":950,"y":4680,"wires":[]},{"id":"507dfaddce267ffd","type":"inject","z":"b9860b4b9de8c8da","name":"output","props":[{"p":"payload"},{"p":"topic","vt":"str"},{"p":"timestamp","v":"","vt":"date"}],"repeat":"120","crontab":"","once":false,"onceDelay":0.1,"topic":"output","payload":"$round($random()*10)","payloadType":"jsonata","x":420,"y":4720,"wires":[["40f75ba563bdf7af"]]},{"id":"2d4fe667.28f8ba","type":"ui_group","name":"demo","tab":"1caa8458.b17814","order":2,"disp":true,"width":"12","collapse":false,"className":""},{"id":"1caa8458.b17814","type":"ui_tab","name":"Demo","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

You can then feed in other topics and the chart will stay at set timescale.

The example is set for 1 hour, for testing. Edit midnight inject to set for 24 hours.
[edit] removed excess array element in inject node.

8

Thx, E1cid. That's more or less my current solution, but it feels clumsy and has the downside of an additional and meaningless data line in my graph.

It would be nice if we could just set a fixed range, but for now I should be able to live with this workaround.

Btw. I learned something new from your proposal, the $$-notation. Thx for that !

9

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