Graph auto resize Issue

[Wolliess]

On load the graph is oversized although my dails is the normal size (see Issue picture attached).
I have to physically resize window with CTRL+Mouse Scroll to resize the window to fix this issue.
A lot of people is viewing my dashboard and each time this issue is appearing.
Can you please help!

See Issue Below:

See Below after manual resize:

[dceejay]

Hi - is there a way I recreate this ?
which version of dashboard are you using ?
and platform / OS and version of Node-RED ? Thanks

[Wolliess]

I see that there is an error in the first one so I repasted it:

[{"id":"d94a69bd.633ab8","type":"tab","label":"GSuite"},{"id":"cd3849a1.848f08","type":"ping","z":"d94a69bd.633ab8","name":"","host":"calendar.google.com","timer":"10","x":201,"y":112.29861259460449,"wires":[["11f5c53b.18b8ab","299384ce.2745fc","ab76203f.58377","1d135da5.e0b8a2"]]},{"id":"281beb8.5d3d714","type":"ping","z":"d94a69bd.633ab8","name":"","host":"mail.google.com","timer":"10","x":190.62152099609375,"y":182.35068321228027,"wires":[["11f5c53b.18b8ab","ba4973b8.21306","19186a9a.005fc5","1d135da5.e0b8a2"]]},{"id":"9683953f.9e5d38","type":"ping","z":"d94a69bd.633ab8","name":"","host":"drive.google.com","timer":"10","x":193.62152099609375,"y":294.3506832122803,"wires":[["11f5c53b.18b8ab","8f1685f7.dba368","8d703f36.97be2","1d135da5.e0b8a2"]]},{"id":"46b87857.05d878","type":"ping","z":"d94a69bd.633ab8","name":"","host":"docs.google.com","timer":"10","x":192.62152099609375,"y":397.3506832122803,"wires":[["11f5c53b.18b8ab","598f86f5.aaa098","8cb1c3a2.4480d","1d135da5.e0b8a2"]]},{"id":"11f5c53b.18b8ab","type":"debug","z":"d94a69bd.633ab8","name":"","active":false,"console":"false","complete":"false","x":544.5555877685547,"y":214.57639694213867,"wires":[]},{"id":"299384ce.2745fc","type":"ui_gauge","z":"d94a69bd.633ab8","name":"Google Calendar","group":"f97df1ff.f9a67","order":1,"width":"3","height":"3","gtype":"gage","title":"Google Calendar","label":"ms","format":"{{value}}","min":0,"max":"260","colors":["#00b500","#e6e600","#ca3838"],"x":568.5522308349609,"y":51,"wires":[]},{"id":"ba4973b8.21306","type":"ui_gauge","z":"d94a69bd.633ab8","name":"Google Mail","group":"f97df1ff.f9a67","order":2,"width":"3","height":"3","gtype":"gage","title":"Google Mail","label":"ms","format":"{{value}}","min":0,"max":"260","colors":["#00b500","#e6e600","#ca3838"],"x":545.6215057373047,"y":132.3506736755371,"wires":[]},{"id":"8f1685f7.dba368","type":"ui_gauge","z":"d94a69bd.633ab8","name":"Google Drive","group":"f97df1ff.f9a67","order":3,"width":"3","height":"3","gtype":"gage","title":"Google Drive","label":"ms","format":"{{value}}","min":0,"max":"260","colors":["#00b500","#e6e600","#ca3838"],"x":543.6215057373047,"y":256.3506736755371,"wires":[]},{"id":"598f86f5.aaa098","type":"ui_gauge","z":"d94a69bd.633ab8","name":"Google Docs","group":"f97df1ff.f9a67","order":4,"width":"3","height":"3","gtype":"gage","title":"Google Docs","label":"ms","format":"{{value}}","min":0,"max":"260","colors":["#00b500","#e6e600","#ca3838"],"x":540.6215057373047,"y":338.3506736755371,"wires":[]},{"id":"e79030bc.38c1d","type":"ui_chart","z":"d94a69bd.633ab8","name":"","group":"797d7c7e.1321f4","order":0,"width":"25","height":"8","label":"","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"x":664.0104217529297,"y":514.1701622009277,"wires":[[],[]]},{"id":"ab76203f.58377","type":"ui_template","z":"d94a69bd.633ab8","group":"f97df1ff.f9a67","name":"calendar.google.com","order":5,"width":"3","height":"1","format":"<style>\n #btn2 {\n -moz-border-radius: 10px;\n -webkit-border-radius: 10px;\n display: inline;\n}\n</style>\n\n<div id = \"btn2\" style=\"font-size:10px;width: 100px; margin:0 auto;height: 15px;padding-top:5px;\"\n ng-style=\"{'background-color': msg.payload === false ? 'red' : 'green'}\">\n <center>{{msg.payload === false ? 'DOWN' : '&nbsp;&nbsp;&nbsp;UP&nbsp;&nbsp;&nbsp;'}}</center>\n</div>\n","storeOutMessages":true,"fwdInMessages":true,"x":577.0069427490234,"y":89.3819465637207,"wires":[[]]},{"id":"19186a9a.005fc5","type":"ui_template","z":"d94a69bd.633ab8","group":"f97df1ff.f9a67","name":"mail.google.com/mail/u/0/","order":6,"width":"3","height":"1","format":"<style>\n #btn2 {\n -moz-border-radius: 10px;\n -webkit-border-radius: 10px;\n display: inline;\n}\n</style>\n\n<div id = \"btn2\" style=\"font-size:10px;width: 100px; margin:0 auto;height: 15px;padding-top:5px;\"\n ng-style=\"{'background-color': msg.payload === false ? 'red' : 'green'}\">\n <center>{{msg.payload === false ? 'DOWN' : '&nbsp;&nbsp;&nbsp;UP&nbsp;&nbsp;&nbsp;'}}</center>\n</div>\n\n\n","storeOutMessages":true,"fwdInMessages":true,"x":585.0034942626953,"y":173.3819694519043,"wires":[[]]},{"id":"8d703f36.97be2","type":"ui_template","z":"d94a69bd.633ab8","group":"f97df1ff.f9a67","name":"drive.google.com","order":7,"width":"3","height":"1","format":"<style>\n #btn2 {\n -moz-border-radius: 10px;\n -webkit-border-radius: 10px;\n display: inline;\n}\n</style>\n\n<div id = \"btn2\" style=\"font-size:10px;width: 100px; margin:0 auto;height: 15px;padding-top:5px;\"\n ng-style=\"{'background-color': msg.payload === false ? 'red' : 'green'}\">\n <center>{{msg.payload === false ? 'DOWN' : '&nbsp;&nbsp;&nbsp;UP&nbsp;&nbsp;&nbsp;'}}</center>\n</div>\n\n\n","storeOutMessages":true,"fwdInMessages":true,"x":563.0104217529297,"y":298.39236068725586,"wires":[[]]},{"id":"8cb1c3a2.4480d","type":"ui_template","z":"d94a69bd.633ab8","group":"f97df1ff.f9a67","name":"docs.google.com","order":8,"width":"3","height":"1","format":"<style>\n #btn2 {\n -moz-border-radius: 10px;\n -webkit-border-radius: 10px;\n display: inline;\n}\n</style>\n\n<div id = \"btn2\" style=\"font-size:10px;width: 100px; margin:0 auto;height: 15px;padding-top:5px;\"\n ng-style=\"{'background-color': msg.payload === false ? 'red' : 'green'}\">\n <center>{{msg.payload === false ? 'DOWN' : '&nbsp;&nbsp;&nbsp;UP&nbsp;&nbsp;&nbsp;'}}</center>\n</div>\n\n\n","storeOutMessages":true,"fwdInMessages":true,"x":559.6215057373047,"y":385.35070419311523,"wires":[[]]},{"id":"1d135da5.e0b8a2","type":"function","z":"d94a69bd.633ab8","name":"","func":"if(msg.payload > 259){\n msg.payload = 260;\n}\nreturn msg;","outputs":1,"noerr":0,"x":469.22569274902344,"y":516.4617881774902,"wires":[["e79030bc.38c1d"]]},{"id":"f97df1ff.f9a67","type":"ui_group","z":"","name":"Google Services","tab":"33ce186e.f7ba68","order":1,"disp":true,"width":"12"},{"id":"797d7c7e.1321f4","type":"ui_group","z":"","name":"Ping Latency","tab":"33ce186e.f7ba68","order":2,"disp":true,"width":"25"},{"id":"33ce186e.f7ba68","type":"ui_tab","z":"","name":"G-Suite Latency","icon":"fa-google","order":17}]

[Wolliess]

The graph used to work before.

Node-RED version: 0.16.2
Dashboard version: 2.3.3

We use 2 flows for the dashboard on an internal server which has a VPN tunnel to the Cloud so I cannot provide 1st dashboard

[dceejay]

Hi, - just trying your example above - on version 2.6.1 (latest on npm) - indeed it does seem to load up looking stretched but as soon as first data arrives it sort itself out automatically....
so - yes needs looking at but is only mildly irritating.

[sandro-k]

@Gingervirus your Node-RED Editor not protected by a password, you should do that if the instance is directly connected to the Internet.

[Wolliess]

@sandro-k MY Node-RED Editor is password protected you have to login to be able to edit flows and deploy it. Are you talking about a login screen?

[sandro-k]

@Gingervirus No I can see the complete flow.

[Wolliess]

Thanks Ill get my Server Administrator onto that

[dceejay]

Closing for now as seems fixed in 2.7 (for me - using example above).
Please re-open if not

[synetic707]

I encounter the same problem. I'm using 2.8 and It shows the chart stretched. After zooming the browser it fixes it. https://puu.sh/zm5YB/2eb3675f31.png

[JayNaire]

I'm running 2.8 and can confirm some graphs get stuck in stretched mode - sometimes.
They will mostly sort themselves out the first time a redraw is done when new data comes in or I switch to another tab and back.
Sometimes they stick forever:

1. because the flow is broken - generally due to my edit deployment errors
2. datasets get too big leading to swap / timeout errors on memory challenged RPi hosts
3. very, very occasionally for reasons I just cannot determine - I've implemented straight angular-chart outside dashboard for these

[dceejay]

closed by b369e2b