Hello, I am wondering if anybody can help me find a solution to which allows me to dynamically change the length of time shown on a chart node? For example, I can change the y-axis min and max values with ui_control, I'd like to be able to do the same with the x-axis, so that I can dynamically adjust if I want to see the trend of the last hour or just the last 5 minutes. This could possibly also be a zoom function. Alternatively, It could switch between displaying a fixed amount of time and being able to put in a start or stop time. Thanks, Russell

Doesn't look like you put any of the changes to the ui_control @hotNipi suggested. your function is var x = flow.get('chartprops').xaxis.min; //time back in milliseconds var d = new Date().getTime() - x //current time in milliseconds - desired time delete msg.payload; delete msg.topic; //send all modification in one go msg.ui_control = { options: { scales: { xAxes: [{ type: 'time', time: { min: d } }], yAxes: [{ ticks: { suggestedMin: flow.get('chartprops').yaxis.min, suggestedMax: flow.get('chartprops').yaxis.max } }] } } } return msg;

If you look in the debug panel you should see an error poping up. There is an error in @hotNipi format-chart function. the variable d does not exist, it should be grabbed from the context variable. change the line time: { min: d } to time: { min: flow.get('chartprops').xaxis.min }

{"options":{"scales":{"xAxes":[{"type":"time","time":{"min":1572697299066}}]}}} Agree, but if I also create a valid ui_control message (see above) I still see no change in the UI. ?

What types of changes are you looking for at this point? Please provide your full flow again.

I looking for a easy way to change the X axis during the runtime, [{"id":"cd9e47f3.c0e718","type":"tab","label":"Flow 2","disabled":false,"info":""},{"id":"5d1b683.cca8798","type":"ui_chart","z":"cd9e47f3.c0e718","name":"","group":"195cd998.7632b6","order":1,"width":0,"height":0,"label":"Melt Temperature","chartType":"line","legend":"false","xformat":"auto","interpolate":"linear","nodata":"awaiting data...","dot":false,"ymin":"0","ymax":"1000","removeOlder":"30","removeOlderPoints":"","removeOlderUnit":"60","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":864,"y":386,"wires":[[]]},{"id":"5b06b35d.8aa9bc","type":"inject","z":"cd9e47f3.c0e718","name":"","topic":"","payload":"","payloadType":"str","repeat":"5","crontab":"","once":false,"onceDelay":"","x":354,"y":426,"wires":[["5dad34da.a11c7c"]]},{"id":"5dad34da.a11c7c","type":"random","z":"cd9e47f3.c0e718","name":"random between 1 - 500","low":"1","high":"500","inte":"false","property":"payload","x":544,"y":426,"wires":[["5d1b683.cca8798"]]},{"id":"ae2baf51.522b7","type":"function","z":"cd9e47f3.c0e718","name":"Format chart","func":"\nvar x = flow.get('chartprops').xaxis.min; //time back in milliseconds\nvar y = flow.get('chartprops');\nnode.status({text: x});\nvar d = new Date().getTime() - x //current time in milliseconds - desired time\ndelete msg.payload;\ndelete msg.topic;\n\n//send all modification in one go\nmsg.ui_control = { \n options: {\n scales: {\n xAxes: [{\n type: 'time',\n time: {\n min: d\n }\n }]\n }\n }\n}\nreturn msg; \n\n","outputs":1,"noerr":0,"x":644,"y":366,"wires":[["5d1b683.cca8798","2223b350.8af84c"]]},{"id":"90b940c6.ee8c","type":"ui_text_input","z":"cd9e47f3.c0e718","name":"","label":"Minutes","tooltip":"","group":"b555fa85.b63bd8","order":3,"width":0,"height":0,"passthru":true,"mode":"number","delay":300,"topic":"time","x":374,"y":196,"wires":[["fedec5e0.22c288","50e1850d.2a496c"]]},{"id":"fedec5e0.22c288","type":"function","z":"cd9e47f3.c0e718","name":"Store chart options","func":"var chartprops = flow.get('chartprops')\nif (!chartprops) {chartprops = {};}\nswitch(msg.topic){\n case 'time':{\n chartprops.xaxis = {};\n chartprops.xaxis.min = {};\n chartprops.xaxis.min = msg.payload * 60000;\n flow.set('chartprops',chartprops);\n node.status({text: chartprops.xaxis.min});\n break;\n }\n}\nflow.set('chartprops',chartprops)\n// message continues to flow but in next node properties will be deleted\n// it will be used only as change event\nreturn msg;\n","outputs":1,"noerr":0,"x":584,"y":236,"wires":[["ae2baf51.522b7","f98aa567.cd0068"]]},{"id":"b0cf3b4b.89c358","type":"inject","z":"cd9e47f3.c0e718","name":"Resend chart format","topic":"","payload":"","payloadType":"date","repeat":"60","crontab":"","once":true,"onceDelay":"1","x":374,"y":366,"wires":[["ae2baf51.522b7"]]},{"id":"353a44f7.2200ac","type":"comment","z":"cd9e47f3.c0e718","name":"Resend - read comments !","info":"If minimum time is sent to chart, it will be absolute\nChart does not take it as time frame\nSo if change is in minutes, it is reasonable enough\nto send new min value to chart in every minute\nto hold time frame constant","x":384,"y":326,"wires":[]},{"id":"2223b350.8af84c","type":"debug","z":"cd9e47f3.c0e718","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":892,"y":288,"wires":[]},{"id":"50e1850d.2a496c","type":"debug","z":"cd9e47f3.c0e718","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":608,"y":180,"wires":[]},{"id":"f98aa567.cd0068","type":"debug","z":"cd9e47f3.c0e718","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":800,"y":219,"wires":[]},{"id":"195cd998.7632b6","type":"ui_group","z":"","name":"Charts","tab":"69dacb8c.3da294","order":3,"disp":true,"width":"6"},{"id":"b555fa85.b63bd8","type":"ui_group","z":"","name":"Chart Scaling","tab":"69dacb8c.3da294","order":2,"disp":true,"width":"3","collapse":true},{"id":"69dacb8c.3da294","type":"ui_tab","z":"","name":"DS Pilot Extrusion Line","icon":"dashboard","order":2}]

With the flow you just provided, if you open the debug tab, what do you see?

No error. Just see the payload as above mentioned. The question is not to fix the flow, it is more if the msg.ui_controll with the following payload should work {"options":{"scales":{"xAxes":[{"type":"time","time":{"min":1572697299066}}]}}}

are you saying that when looking at the graph, if you change the "Chart Scaling" number, nothing changes? If you want the ability to take a graph and drill down at a particular time, you might want to investigate Influx and Grafana.

are you saying that when looking at the graph, if you change the "Chart Scaling" number, nothing changes? Yes, If you want the ability to take a graph and drill down at a particular time, you might want to investigate Influx and Grafana. I already have a ELK instance running with all these feature. But i want to check if I find a solution to draw charts with variables X-axis (time) That is also the heading of this topic :wink:

[25%20AM] [34%20AM] Here is what I see. What versions of node-red: node.js: node-red-dashboard: what OS and version: What browser:

Node-RED

Node-RED Forum

Chart Variable Timeline X-Axis

Dashboard

hotNipi 22 March 2023 16:49 41

Explore examples from this topic

Topic		Replies	Views
Help to Change X- Axis Value General	37	9853	17 July 2024
How to keep the X-Axis in node red Dashboard chart	18	520	29 November 2022
Node-Red Dashboard (X-axis doesn't show any values) Dashboard	13	376	28 December 2022
Dashboard chart customisation bug? Dashboard	9	959	27 December 2020
Dashboard: Change X-Axis in graph with button or slider Dashboard	4	2363	28 August 2019

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

Chart Variable Timeline X-Axis

Related topics