Dashboard chart customisation bug?

Dashboard
1

[reproducible issue described in posts 3-6]

Hi team,

My dashboard has a set of graphs like this

image

(It's power data from Tasmota sensors)

What I'd like to do is remove the whitespace (greyspace?) above the graph, and also set the y-axis grid interval to a custom value.

image

I've read https://github.com/node-red/node-red-dashboard/blob/master/config-fields.md and https://jtblin.github.io/angular-chart.js/ and I'm none the wiser about how to proceed. HTML and CSS really isn't my thing.

Thank you for any support or guidance you might be able to offer.

2

For chart y-axis you can send the options to change the configuration

msg.ui_control = {
    options: {
        scales: {
            yAxes: [{
                type: 'linear',
                ticks: {
                    suggestedMin: 0,
                    suggestedMax: 10,
                    stepSize: 5
                }
                     
            }]
        }
    }
}
delete msg.payload
return msg;

The top area is place for chart label. Even if it s left empty it still has some styles and it takes a bit space.

Add ui_template, target to be added to the site head to override a bit of dashboard CSS

<style>
p.nr-dashboard-chart-title {
  padding: unset;
}
</style>

It may move things in right direction for you but may also need some other adjustments. So try and do experiments and don't be afraid of the CSS thing.

3

Thank you so much for the pointers!

Regarding the CSS, I'll try to figure out how to completely remove or shrink the labels element.

With the ui_control stuff, I'm running into something that I think might? be a bug.

This is what I'm sending to the chart node:

image

I can show you the data if it matters.

When I include this in my function node, the chart either disappears completely in Chrome 87.0.4280.88 64-bit on Windows, or shows up shrunk to about half its size along the x-axis, and the browser console goes bananas:

image
image821Ă—731 50.6 KB

The hundreds of Uncaught TypeErrors spiral rapidly when I mouse over where the chart ought to be.

I can sometimes get the chart back not by Ctrl-F5, not by redeploying the Dashboard, but by re-ordering the charts in the Dashboard sidebar, and then redeploying.

The chart seems to display OK (with the modified scale) on an old Android tablet, also running Chrome, but also shows up blank in Mobile Safari on iOS 14.2

Any thoughts?

4

Seems like the chart is not ready yet to take the data input.
What is the version of the dashboard you are using?

I see you have the data queried from some DB and then feed to chart. If it works but fails sometimes then most probably the data format is correct. There may be timing issue .... but not sure.
May be try to make things in following sequence: if dashboard initializes use a little delay and send the empty array to clear out whatever was in chart. Then send the ui_control message and after that send the data.

Or .. to make it for us to be able to reproduce the issue ..
If you can make an test flow with one chart, with example data in format as it was replied from query and you do see same errors with that test flow, it is worth of investigating.

1 Like
5

Right... I think I've reproduced this.

Flow:

[{"id":"f79d10eb.15b63","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"ec3386a2.832328","type":"ui_chart","z":"f79d10eb.15b63","name":"TV chart","group":"3cd34445.07866c","order":8,"width":"6","height":"2","label":"","chartType":"line","legend":"false","xformat":"HH","interpolate":"linear","nodata":"Awaiting data...","dot":false,"ymin":"","ymax":"","removeOlder":"12","removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#ff810a","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":880,"y":140,"wires":[[]]},{"id":"8677f428.3ce038","type":"inject","z":"f79d10eb.15b63","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":250,"y":140,"wires":[["abfdac57.aaa0e"]]},{"id":"abfdac57.aaa0e","type":"function","z":"f79d10eb.15b63","name":"","func":"msg={\"_msgid\":\"ba9335a5.11fa48\",\"measurement\":\"tvdownstairs\",\"query\":\"SELECT MEAN(*) from \\\"1week\\\".\\\"tvdownstairs\\\" WHERE time > NOW() -14h GROUP BY time(5m)\",\"payload\":[{\"series\":[\"demand\"],\"data\":[[{\"x\":1608976500000,\"y\":null},{\"x\":1608976800000,\"y\":null},{\"x\":1608977100000,\"y\":null},{\"x\":1608977400000,\"y\":null},{\"x\":1608977700000,\"y\":null},{\"x\":1608978000000,\"y\":null},{\"x\":1608978300000,\"y\":null},{\"x\":1608978600000,\"y\":null},{\"x\":1608978900000,\"y\":null},{\"x\":1608979200000,\"y\":null},{\"x\":1608979500000,\"y\":null},{\"x\":1608979800000,\"y\":null},{\"x\":1608980100000,\"y\":null},{\"x\":1608980400000,\"y\":null},{\"x\":1608980700000,\"y\":null},{\"x\":1608981000000,\"y\":null},{\"x\":1608981300000,\"y\":null},{\"x\":1608981600000,\"y\":null},{\"x\":1608981900000,\"y\":null},{\"x\":1608982200000,\"y\":null},{\"x\":1608982500000,\"y\":null},{\"x\":1608982800000,\"y\":null},{\"x\":1608983100000,\"y\":null},{\"x\":1608983400000,\"y\":null},{\"x\":1608983700000,\"y\":null},{\"x\":1608984000000,\"y\":null},{\"x\":1608984300000,\"y\":null},{\"x\":1608984600000,\"y\":null},{\"x\":1608984900000,\"y\":null},{\"x\":1608985200000,\"y\":null},{\"x\":1608985500000,\"y\":null},{\"x\":1608985800000,\"y\":null},{\"x\":1608986100000,\"y\":null},{\"x\":1608986400000,\"y\":null},{\"x\":1608986700000,\"y\":null},{\"x\":1608987000000,\"y\":null},{\"x\":1608987300000,\"y\":null},{\"x\":1608987600000,\"y\":null},{\"x\":1608987900000,\"y\":null},{\"x\":1608988200000,\"y\":null},{\"x\":1608988500000,\"y\":null},{\"x\":1608988800000,\"y\":null},{\"x\":1608989100000,\"y\":null},{\"x\":1608989400000,\"y\":null},{\"x\":1608989700000,\"y\":null},{\"x\":1608990000000,\"y\":null},{\"x\":1608990300000,\"y\":null},{\"x\":1608990600000,\"y\":null},{\"x\":1608990900000,\"y\":null},{\"x\":1608991200000,\"y\":null},{\"x\":1608991500000,\"y\":null},{\"x\":1608991800000,\"y\":14},{\"x\":1608992100000,\"y\":14},{\"x\":1608992400000,\"y\":14},{\"x\":1608992700000,\"y\":14},{\"x\":1608993000000,\"y\":14},{\"x\":1608993300000,\"y\":14.090909090909092},{\"x\":1608993600000,\"y\":14},{\"x\":1608993900000,\"y\":14},{\"x\":1608994200000,\"y\":14},{\"x\":1608994500000,\"y\":13.909090909090908},{\"x\":1608994800000,\"y\":14},{\"x\":1608995100000,\"y\":14},{\"x\":1608995400000,\"y\":14.090909090909092},{\"x\":1608995700000,\"y\":14},{\"x\":1608996000000,\"y\":14.090909090909092},{\"x\":1608996300000,\"y\":14},{\"x\":1608996600000,\"y\":14},{\"x\":1608996900000,\"y\":14},{\"x\":1608997200000,\"y\":14.090909090909092},{\"x\":1608997500000,\"y\":14},{\"x\":1608997800000,\"y\":14.090909090909092},{\"x\":1608998100000,\"y\":14},{\"x\":1608998400000,\"y\":16.09090909090909},{\"x\":1608998700000,\"y\":14.181818181818182},{\"x\":1608999000000,\"y\":14.272727272727273},{\"x\":1608999300000,\"y\":13.909090909090908},{\"x\":1608999600000,\"y\":14.181818181818182},{\"x\":1608999900000,\"y\":14},{\"x\":1609000200000,\"y\":14},{\"x\":1609000500000,\"y\":14.272727272727273},{\"x\":1609000800000,\"y\":14},{\"x\":1609001100000,\"y\":14},{\"x\":1609001400000,\"y\":15.363636363636363},{\"x\":1609001700000,\"y\":16.454545454545453},{\"x\":1609002000000,\"y\":78.18181818181819},{\"x\":1609002300000,\"y\":99.27272727272727},{\"x\":1609002600000,\"y\":96.9090909090909},{\"x\":1609002900000,\"y\":96.36363636363636},{\"x\":1609003200000,\"y\":96.63636363636364},{\"x\":1609003500000,\"y\":96.54545454545455},{\"x\":1609003800000,\"y\":96.54545454545455},{\"x\":1609004100000,\"y\":96.63636363636364},{\"x\":1609004400000,\"y\":96.54545454545455},{\"x\":1609004700000,\"y\":97.27272727272727},{\"x\":1609005000000,\"y\":98.81818181818181},{\"x\":1609005300000,\"y\":98.36363636363636},{\"x\":1609005600000,\"y\":98.27272727272727},{\"x\":1609005900000,\"y\":23.818181818181817},{\"x\":1609006200000,\"y\":16.454545454545453},{\"x\":1609006500000,\"y\":16.181818181818183},{\"x\":1609006800000,\"y\":16.454545454545453},{\"x\":1609007100000,\"y\":16.636363636363637},{\"x\":1609007400000,\"y\":18.09090909090909},{\"x\":1609007700000,\"y\":17.90909090909091},{\"x\":1609008000000,\"y\":18.272727272727273},{\"x\":1609008300000,\"y\":18.181818181818183},{\"x\":1609008600000,\"y\":18.727272727272727},{\"x\":1609008900000,\"y\":18.727272727272727},{\"x\":1609009200000,\"y\":18.181818181818183},{\"x\":1609009500000,\"y\":18.09090909090909},{\"x\":1609009800000,\"y\":20.09090909090909},{\"x\":1609010100000,\"y\":102.18181818181819},{\"x\":1609010400000,\"y\":100.45454545454545},{\"x\":1609010700000,\"y\":98.72727272727273},{\"x\":1609011000000,\"y\":95.45454545454545},{\"x\":1609011300000,\"y\":96.36363636363636},{\"x\":1609011600000,\"y\":97},{\"x\":1609011900000,\"y\":95.54545454545455},{\"x\":1609012200000,\"y\":96.18181818181819},{\"x\":1609012500000,\"y\":95.18181818181819},{\"x\":1609012800000,\"y\":96.88888888888889},{\"x\":1609013100000,\"y\":97.63636363636364},{\"x\":1609013400000,\"y\":96.0909090909091},{\"x\":1609013700000,\"y\":95.27272727272727},{\"x\":1609014000000,\"y\":97.63636363636364},{\"x\":1609014300000,\"y\":96.81818181818181},{\"x\":1609014600000,\"y\":96.63636363636364},{\"x\":1609014900000,\"y\":95.63636363636364},{\"x\":1609015200000,\"y\":95.36363636363636},{\"x\":1609015500000,\"y\":95.0909090909091},{\"x\":1609015800000,\"y\":95.45454545454545},{\"x\":1609016100000,\"y\":96.45454545454545},{\"x\":1609016400000,\"y\":95.81818181818181},{\"x\":1609016700000,\"y\":95.36363636363636},{\"x\":1609017000000,\"y\":92.9090909090909},{\"x\":1609017300000,\"y\":98.27272727272727},{\"x\":1609017600000,\"y\":98.72727272727273},{\"x\":1609017900000,\"y\":96.9090909090909},{\"x\":1609018200000,\"y\":97.54545454545455},{\"x\":1609018500000,\"y\":96.63636363636364},{\"x\":1609018800000,\"y\":96.27272727272727},{\"x\":1609019100000,\"y\":96.27272727272727},{\"x\":1609019400000,\"y\":96.72727272727273},{\"x\":1609019700000,\"y\":97.54545454545455},{\"x\":1609020000000,\"y\":95.63636363636364},{\"x\":1609020300000,\"y\":95.18181818181819},{\"x\":1609020600000,\"y\":73.45454545454545},{\"x\":1609020900000,\"y\":16.272727272727273},{\"x\":1609021200000,\"y\":16.363636363636363},{\"x\":1609021500000,\"y\":16.272727272727273},{\"x\":1609021800000,\"y\":16.272727272727273},{\"x\":1609022100000,\"y\":16.363636363636363},{\"x\":1609022400000,\"y\":16.454545454545453},{\"x\":1609022700000,\"y\":16.545454545454547},{\"x\":1609023000000,\"y\":16.272727272727273},{\"x\":1609023300000,\"y\":16.363636363636363},{\"x\":1609023600000,\"y\":16.181818181818183},{\"x\":1609023900000,\"y\":15.090909090909092},{\"x\":1609024200000,\"y\":14.454545454545455},{\"x\":1609024500000,\"y\":14.454545454545455},{\"x\":1609024800000,\"y\":14.363636363636363},{\"x\":1609025100000,\"y\":14.363636363636363},{\"x\":1609025400000,\"y\":14.272727272727273},{\"x\":1609025700000,\"y\":14.363636363636363},{\"x\":1609026000000,\"y\":14.3},{\"x\":1609026300000,\"y\":14.363636363636363},{\"x\":1609026600000,\"y\":14.454545454545455},{\"x\":1609026900000,\"y\":14.5}]]}],\"ui_control\":{\"options\":{\"scales\":{\"yAxes\":[{\"type\":\"linear\",\"ticks\":{\"suggestedMin\":0,\"suggestedMax\":120,\"stepSize\":60}}]}}}}\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":470,"y":140,"wires":[["4b8c846d.e8894c","ec3386a2.832328"]]},{"id":"4b8c846d.e8894c","type":"debug","z":"f79d10eb.15b63","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":660,"y":220,"wires":[]},{"id":"3cd34445.07866c","type":"ui_group","name":"Charts","tab":"a2b49b1.3047e68","order":2,"disp":false,"width":"6","collapse":false},{"id":"a2b49b1.3047e68","type":"ui_tab","name":"Stats","icon":"dashboard","order":2,"disabled":false,"hidden":false}]

image
image842Ă—262 7.96 KB

The function node injects the JSON data copied and pasted from a debug node in the problematic flow.

Things to note:

  1. The chart doesn't seem to respond to the ui_control settings
  2. The chart may display correctly at first - I find a Ctrl-F5 or just waiting a while will cause it to misbehave.
6

True. The options break the chart but don't know yet why. And my day is more than over so I try to look for solution tomorrow.

1 Like
7

Thanks for offering to help :slight_smile:

8

Got it working :slight_smile:
Takes just a bit more clear mind to realize that both axis needed to be defined.

Adjusted chart appearance with CSS override, that may be good for that chart but if there is more and they are different, it may take more specific treatment.

[{"id":"cdccd104.a61d6","type":"ui_chart","z":"1ea32064.47b71","name":"TV chart","group":"6b31974e.fb4078","order":8,"width":"6","height":"2","label":"","chartType":"line","legend":"false","xformat":"HH","interpolate":"linear","nodata":"Awaiting data...","dot":false,"ymin":"","ymax":"","removeOlder":"12","removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#ff810a","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"x":660,"y":100,"wires":[[]]},{"id":"6487831b.badc8c","type":"inject","z":"1ea32064.47b71","name":"","topic":"","payload":"[{\"x\":1608976500000,\"y\":null},{\"x\":1608976800000,\"y\":null},{\"x\":1608977100000,\"y\":null},{\"x\":1608977400000,\"y\":null},{\"x\":1608977700000,\"y\":null},{\"x\":1608978000000,\"y\":null},{\"x\":1608978300000,\"y\":null},{\"x\":1608978600000,\"y\":null},{\"x\":1608978900000,\"y\":null},{\"x\":1608979200000,\"y\":null},{\"x\":1608979500000,\"y\":null},{\"x\":1608979800000,\"y\":null},{\"x\":1608980100000,\"y\":null},{\"x\":1608980400000,\"y\":null},{\"x\":1608980700000,\"y\":null},{\"x\":1608981000000,\"y\":null},{\"x\":1608981300000,\"y\":null},{\"x\":1608981600000,\"y\":null},{\"x\":1608981900000,\"y\":null},{\"x\":1608982200000,\"y\":null},{\"x\":1608982500000,\"y\":null},{\"x\":1608982800000,\"y\":null},{\"x\":1608983100000,\"y\":null},{\"x\":1608983400000,\"y\":null},{\"x\":1608983700000,\"y\":null},{\"x\":1608984000000,\"y\":null},{\"x\":1608984300000,\"y\":null},{\"x\":1608984600000,\"y\":null},{\"x\":1608984900000,\"y\":null},{\"x\":1608985200000,\"y\":null},{\"x\":1608985500000,\"y\":null},{\"x\":1608985800000,\"y\":null},{\"x\":1608986100000,\"y\":null},{\"x\":1608986400000,\"y\":null},{\"x\":1608986700000,\"y\":null},{\"x\":1608987000000,\"y\":null},{\"x\":1608987300000,\"y\":null},{\"x\":1608987600000,\"y\":null},{\"x\":1608987900000,\"y\":null},{\"x\":1608988200000,\"y\":null},{\"x\":1608988500000,\"y\":null},{\"x\":1608988800000,\"y\":null},{\"x\":1608989100000,\"y\":null},{\"x\":1608989400000,\"y\":null},{\"x\":1608989700000,\"y\":null},{\"x\":1608990000000,\"y\":null},{\"x\":1608990300000,\"y\":null},{\"x\":1608990600000,\"y\":null},{\"x\":1608990900000,\"y\":null},{\"x\":1608991200000,\"y\":null},{\"x\":1608991500000,\"y\":null},{\"x\":1608991800000,\"y\":14},{\"x\":1608992100000,\"y\":14},{\"x\":1608992400000,\"y\":14},{\"x\":1608992700000,\"y\":14},{\"x\":1608993000000,\"y\":14},{\"x\":1608993300000,\"y\":14.090909090909092},{\"x\":1608993600000,\"y\":14},{\"x\":1608993900000,\"y\":14},{\"x\":1608994200000,\"y\":14},{\"x\":1608994500000,\"y\":13.909090909090908},{\"x\":1608994800000,\"y\":14},{\"x\":1608995100000,\"y\":14},{\"x\":1608995400000,\"y\":14.090909090909092},{\"x\":1608995700000,\"y\":14},{\"x\":1608996000000,\"y\":14.090909090909092},{\"x\":1608996300000,\"y\":14},{\"x\":1608996600000,\"y\":14},{\"x\":1608996900000,\"y\":14},{\"x\":1608997200000,\"y\":14.090909090909092},{\"x\":1608997500000,\"y\":14},{\"x\":1608997800000,\"y\":14.090909090909092},{\"x\":1608998100000,\"y\":14},{\"x\":1608998400000,\"y\":16.09090909090909},{\"x\":1608998700000,\"y\":14.181818181818182},{\"x\":1608999000000,\"y\":14.272727272727273},{\"x\":1608999300000,\"y\":13.909090909090908},{\"x\":1608999600000,\"y\":14.181818181818182},{\"x\":1608999900000,\"y\":14},{\"x\":1609000200000,\"y\":14},{\"x\":1609000500000,\"y\":14.272727272727273},{\"x\":1609000800000,\"y\":14},{\"x\":1609001100000,\"y\":14},{\"x\":1609001400000,\"y\":15.363636363636363},{\"x\":1609001700000,\"y\":16.454545454545453},{\"x\":1609002000000,\"y\":78.18181818181819},{\"x\":1609002300000,\"y\":99.27272727272727},{\"x\":1609002600000,\"y\":96.9090909090909},{\"x\":1609002900000,\"y\":96.36363636363636},{\"x\":1609003200000,\"y\":96.63636363636364},{\"x\":1609003500000,\"y\":96.54545454545455},{\"x\":1609003800000,\"y\":96.54545454545455},{\"x\":1609004100000,\"y\":96.63636363636364},{\"x\":1609004400000,\"y\":96.54545454545455},{\"x\":1609004700000,\"y\":97.27272727272727},{\"x\":1609005000000,\"y\":98.81818181818181},{\"x\":1609005300000,\"y\":98.36363636363636},{\"x\":1609005600000,\"y\":98.27272727272727},{\"x\":1609005900000,\"y\":23.818181818181817},{\"x\":1609006200000,\"y\":16.454545454545453},{\"x\":1609006500000,\"y\":16.181818181818183},{\"x\":1609006800000,\"y\":16.454545454545453},{\"x\":1609007100000,\"y\":16.636363636363637},{\"x\":1609007400000,\"y\":18.09090909090909},{\"x\":1609007700000,\"y\":17.90909090909091},{\"x\":1609008000000,\"y\":18.272727272727273},{\"x\":1609008300000,\"y\":18.181818181818183},{\"x\":1609008600000,\"y\":18.727272727272727},{\"x\":1609008900000,\"y\":18.727272727272727},{\"x\":1609009200000,\"y\":18.181818181818183},{\"x\":1609009500000,\"y\":18.09090909090909},{\"x\":1609009800000,\"y\":20.09090909090909},{\"x\":1609010100000,\"y\":102.18181818181819},{\"x\":1609010400000,\"y\":100.45454545454545},{\"x\":1609010700000,\"y\":98.72727272727273},{\"x\":1609011000000,\"y\":95.45454545454545},{\"x\":1609011300000,\"y\":96.36363636363636},{\"x\":1609011600000,\"y\":97},{\"x\":1609011900000,\"y\":95.54545454545455},{\"x\":1609012200000,\"y\":96.18181818181819},{\"x\":1609012500000,\"y\":95.18181818181819},{\"x\":1609012800000,\"y\":96.88888888888889},{\"x\":1609013100000,\"y\":97.63636363636364},{\"x\":1609013400000,\"y\":96.0909090909091},{\"x\":1609013700000,\"y\":95.27272727272727},{\"x\":1609014000000,\"y\":97.63636363636364},{\"x\":1609014300000,\"y\":96.81818181818181},{\"x\":1609014600000,\"y\":96.63636363636364},{\"x\":1609014900000,\"y\":95.63636363636364},{\"x\":1609015200000,\"y\":95.36363636363636},{\"x\":1609015500000,\"y\":95.0909090909091},{\"x\":1609015800000,\"y\":95.45454545454545},{\"x\":1609016100000,\"y\":96.45454545454545},{\"x\":1609016400000,\"y\":95.81818181818181},{\"x\":1609016700000,\"y\":95.36363636363636},{\"x\":1609017000000,\"y\":92.9090909090909},{\"x\":1609017300000,\"y\":98.27272727272727},{\"x\":1609017600000,\"y\":98.72727272727273},{\"x\":1609017900000,\"y\":96.9090909090909},{\"x\":1609018200000,\"y\":97.54545454545455},{\"x\":1609018500000,\"y\":96.63636363636364},{\"x\":1609018800000,\"y\":96.27272727272727},{\"x\":1609019100000,\"y\":96.27272727272727},{\"x\":1609019400000,\"y\":96.72727272727273},{\"x\":1609019700000,\"y\":97.54545454545455},{\"x\":1609020000000,\"y\":95.63636363636364},{\"x\":1609020300000,\"y\":95.18181818181819},{\"x\":1609020600000,\"y\":73.45454545454545},{\"x\":1609020900000,\"y\":16.272727272727273},{\"x\":1609021200000,\"y\":16.363636363636363},{\"x\":1609021500000,\"y\":16.272727272727273},{\"x\":1609021800000,\"y\":16.272727272727273},{\"x\":1609022100000,\"y\":16.363636363636363},{\"x\":1609022400000,\"y\":16.454545454545453},{\"x\":1609022700000,\"y\":16.545454545454547},{\"x\":1609023000000,\"y\":16.272727272727273},{\"x\":1609023300000,\"y\":16.363636363636363},{\"x\":1609023600000,\"y\":16.181818181818183},{\"x\":1609023900000,\"y\":15.090909090909092},{\"x\":1609024200000,\"y\":14.454545454545455},{\"x\":1609024500000,\"y\":14.454545454545455},{\"x\":1609024800000,\"y\":14.363636363636363},{\"x\":1609025100000,\"y\":14.363636363636363},{\"x\":1609025400000,\"y\":14.272727272727273},{\"x\":1609025700000,\"y\":14.363636363636363},{\"x\":1609026000000,\"y\":14.3},{\"x\":1609026300000,\"y\":14.363636363636363},{\"x\":1609026600000,\"y\":14.454545454545455},{\"x\":1609026900000,\"y\":14.5}]","payloadType":"json","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":170,"y":60,"wires":[["3802d923.5bbc26"]]},{"id":"3802d923.5bbc26","type":"function","z":"1ea32064.47b71","name":"prepare data","func":"msg.payload = [\n    {\n        \"series\":[\"demand\"],\n        \"data\":[msg.payload],\n        \"labels\": [\"x\"]\n}]\n\n\nreturn msg;","outputs":1,"noerr":0,"x":430,"y":60,"wires":[["9706df97.7050e","cdccd104.a61d6"]]},{"id":"9706df97.7050e","type":"debug","z":"1ea32064.47b71","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":630,"y":60,"wires":[]},{"id":"5747524a.bbbf2c","type":"function","z":"1ea32064.47b71","name":"format","func":"var gridcolor = \"#7a7a52\"\nvar fontcolor = \"#ccccb3\"\nmsg.ui_control ={\n    options:{\n        scales:{\n            yAxes:[{\n                gridLines :{\n                    zeroLineColor:gridcolor,\n                    color:gridcolor,\n                    lineWidth:0.5,\n                    drawTicks:false,\n                    drawBorder:false,\n \n                },\n               \n                ticks:{\n                    suggestedMax:120,\n                    suggestedMin: 0,\n                    stepSize:60,\n                    fontColor:fontcolor,\n                    fontSize:9,\n                    padding:5,\n                     \n                }\n            }],\n            xAxes: [{\n                gridLines :{\n                    zeroLineColor:gridcolor,\n                    color:gridcolor,\n                    lineWidth:0.5,\n                    drawTicks:false,\n                    drawBorder:false,\n                    tickMarkLength:5\n                    \n                },\n                \n                type: 'time',\n                bounds:'data',\n                ticks:{\n                  source:'labels',\n                  fontColor:fontcolor,\n                  fontSize:9,\n                  padding:0,\n                   \n                },\n                time: {\n                    unit: 'hour',\n                   \n                    distribution: 'series',\n                    displayFormats: {\n                        hour: 'HH'\n                    }\n                }\n            }]\n        }\n    }\n}\ndelete msg.payload\nreturn msg;","outputs":1,"noerr":0,"x":410,"y":140,"wires":[["cdccd104.a61d6"]]},{"id":"9b3ded53.c2514","type":"inject","z":"1ea32064.47b71","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":170,"y":140,"wires":[["5747524a.bbbf2c"]]},{"id":"26530c8b.20a5a4","type":"inject","z":"1ea32064.47b71","name":"clear","topic":"","payload":"[]","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":410,"y":100,"wires":[["cdccd104.a61d6"]]},{"id":"bd18f3bb.4f179","type":"inject","z":"1ea32064.47b71","name":"","topic":"","payload":"[{\"x\":1608991800000,\"y\":14},{\"x\":1608992100000,\"y\":14},{\"x\":1608992400000,\"y\":14},{\"x\":1608992700000,\"y\":14},{\"x\":1608993000000,\"y\":14},{\"x\":1608993300000,\"y\":14.090909090909092},{\"x\":1608993600000,\"y\":14},{\"x\":1608993900000,\"y\":14},{\"x\":1608994200000,\"y\":14},{\"x\":1608994500000,\"y\":13.909090909090908},{\"x\":1608994800000,\"y\":14},{\"x\":1608995100000,\"y\":14},{\"x\":1608995400000,\"y\":14.090909090909092},{\"x\":1608995700000,\"y\":14},{\"x\":1608996000000,\"y\":14.090909090909092},{\"x\":1608996300000,\"y\":14},{\"x\":1608996600000,\"y\":14},{\"x\":1608996900000,\"y\":14},{\"x\":1608997200000,\"y\":14.090909090909092},{\"x\":1608997500000,\"y\":14},{\"x\":1608997800000,\"y\":14.090909090909092},{\"x\":1608998100000,\"y\":14},{\"x\":1608998400000,\"y\":16.09090909090909},{\"x\":1608998700000,\"y\":14.181818181818182},{\"x\":1608999000000,\"y\":14.272727272727273},{\"x\":1608999300000,\"y\":13.909090909090908},{\"x\":1608999600000,\"y\":14.181818181818182},{\"x\":1608999900000,\"y\":14},{\"x\":1609000200000,\"y\":14},{\"x\":1609000500000,\"y\":14.272727272727273},{\"x\":1609000800000,\"y\":14},{\"x\":1609001100000,\"y\":14},{\"x\":1609001400000,\"y\":15.363636363636363},{\"x\":1609001700000,\"y\":16.454545454545453},{\"x\":1609002000000,\"y\":78.18181818181819},{\"x\":1609002300000,\"y\":99.27272727272727},{\"x\":1609002600000,\"y\":96.9090909090909},{\"x\":1609002900000,\"y\":96.36363636363636},{\"x\":1609003200000,\"y\":96.63636363636364},{\"x\":1609003500000,\"y\":96.54545454545455},{\"x\":1609003800000,\"y\":96.54545454545455},{\"x\":1609004100000,\"y\":96.63636363636364},{\"x\":1609004400000,\"y\":96.54545454545455},{\"x\":1609004700000,\"y\":97.27272727272727},{\"x\":1609005000000,\"y\":98.81818181818181},{\"x\":1609005300000,\"y\":98.36363636363636},{\"x\":1609005600000,\"y\":98.27272727272727},{\"x\":1609005900000,\"y\":23.818181818181817},{\"x\":1609006200000,\"y\":16.454545454545453},{\"x\":1609006500000,\"y\":16.181818181818183},{\"x\":1609006800000,\"y\":16.454545454545453},{\"x\":1609007100000,\"y\":16.636363636363637},{\"x\":1609007400000,\"y\":18.09090909090909},{\"x\":1609007700000,\"y\":17.90909090909091},{\"x\":1609008000000,\"y\":18.272727272727273},{\"x\":1609008300000,\"y\":18.181818181818183},{\"x\":1609008600000,\"y\":18.727272727272727},{\"x\":1609008900000,\"y\":18.727272727272727},{\"x\":1609009200000,\"y\":18.181818181818183},{\"x\":1609009500000,\"y\":18.09090909090909},{\"x\":1609009800000,\"y\":20.09090909090909},{\"x\":1609010100000,\"y\":102.18181818181819},{\"x\":1609010400000,\"y\":100.45454545454545},{\"x\":1609010700000,\"y\":98.72727272727273},{\"x\":1609011000000,\"y\":95.45454545454545},{\"x\":1609011300000,\"y\":96.36363636363636},{\"x\":1609011600000,\"y\":97},{\"x\":1609011900000,\"y\":95.54545454545455},{\"x\":1609012200000,\"y\":96.18181818181819},{\"x\":1609012500000,\"y\":95.18181818181819},{\"x\":1609012800000,\"y\":96.88888888888889},{\"x\":1609013100000,\"y\":97.63636363636364},{\"x\":1609013400000,\"y\":96.0909090909091},{\"x\":1609013700000,\"y\":95.27272727272727},{\"x\":1609014000000,\"y\":97.63636363636364},{\"x\":1609014300000,\"y\":96.81818181818181},{\"x\":1609014600000,\"y\":96.63636363636364},{\"x\":1609014900000,\"y\":95.63636363636364},{\"x\":1609015200000,\"y\":95.36363636363636},{\"x\":1609015500000,\"y\":95.0909090909091},{\"x\":1609015800000,\"y\":95.45454545454545},{\"x\":1609016100000,\"y\":96.45454545454545},{\"x\":1609016400000,\"y\":95.81818181818181},{\"x\":1609016700000,\"y\":95.36363636363636},{\"x\":1609017000000,\"y\":92.9090909090909},{\"x\":1609017300000,\"y\":98.27272727272727},{\"x\":1609017600000,\"y\":98.72727272727273},{\"x\":1609017900000,\"y\":96.9090909090909},{\"x\":1609018200000,\"y\":97.54545454545455},{\"x\":1609018500000,\"y\":96.63636363636364},{\"x\":1609018800000,\"y\":96.27272727272727},{\"x\":1609019100000,\"y\":96.27272727272727},{\"x\":1609019400000,\"y\":96.72727272727273},{\"x\":1609019700000,\"y\":97.54545454545455},{\"x\":1609020000000,\"y\":95.63636363636364},{\"x\":1609020300000,\"y\":95.18181818181819},{\"x\":1609020600000,\"y\":73.45454545454545},{\"x\":1609020900000,\"y\":16.272727272727273},{\"x\":1609021200000,\"y\":16.363636363636363},{\"x\":1609021500000,\"y\":16.272727272727273},{\"x\":1609021800000,\"y\":16.272727272727273},{\"x\":1609022100000,\"y\":16.363636363636363},{\"x\":1609022400000,\"y\":16.454545454545453},{\"x\":1609022700000,\"y\":16.545454545454547},{\"x\":1609023000000,\"y\":16.272727272727273},{\"x\":1609023300000,\"y\":16.363636363636363},{\"x\":1609023600000,\"y\":16.181818181818183},{\"x\":1609023900000,\"y\":15.090909090909092},{\"x\":1609024200000,\"y\":14.454545454545455},{\"x\":1609024500000,\"y\":14.454545454545455},{\"x\":1609024800000,\"y\":14.363636363636363},{\"x\":1609025100000,\"y\":14.363636363636363},{\"x\":1609025400000,\"y\":14.272727272727273},{\"x\":1609025700000,\"y\":14.363636363636363},{\"x\":1609026000000,\"y\":14.3},{\"x\":1609026300000,\"y\":14.363636363636363},{\"x\":1609026600000,\"y\":14.454545454545455},{\"x\":1609026900000,\"y\":14.5}]","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":170,"y":100,"wires":[["3802d923.5bbc26"]]},{"id":"8184a3d2.b3d4d","type":"ui_template","z":"1ea32064.47b71","group":"6b31974e.fb4078","name":"","order":1,"width":0,"height":0,"format":"<style>\n    canvas.chart.chart-line {\n    /* height: calc(100% + 22px) !important; */\n    width: calc(100%) !important;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":160,"y":180,"wires":[[]]},{"id":"6b31974e.fb4078","type":"ui_group","name":"Charts","tab":"24c494a3.876e1c","order":2,"disp":false,"width":"6","collapse":false},{"id":"24c494a3.876e1c","type":"ui_tab","name":"Stats","icon":"dashboard","order":2,"disabled":false,"hidden":false}]
9

Aha, that makes sense!

I’ll have a go later.

Really appreciate your time, thank you :blush:

10

May be a little better chart size and placement...

[{"id":"8184a3d2.b3d4d","type":"ui_template","z":"1ea32064.47b71","group":"6b31974e.fb4078","name":"","order":1,"width":0,"height":0,"format":"<style>\np.nr-dashboard-chart-title {\n  padding: unset;\n}\ncanvas.chart.chart-line {\n    height:calc(100%) !important;\n    width: calc(100%) !important;\n}\n.nr-dashboard-chart-nolabel {\n    height:calc(100% - 22px)\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":200,"y":200,"wires":[[]]},{"id":"6b31974e.fb4078","type":"ui_group","name":"Charts","tab":"24c494a3.876e1c","order":2,"disp":false,"width":"6","collapse":false},{"id":"24c494a3.876e1c","type":"ui_tab","name":"Stats","icon":"dashboard","order":2,"disabled":false,"hidden":false}]

image

11

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