[Dashboard] How to create a line chart?
Posted: Wed Apr 12, 2023 5:43 am
這個流程會定期生成一個 0~50 的隨機整數，然後使用 ui_chart node 顯示這些整數的變化情況。在 AIC IoT Studio 中，可以使用 Random node 代替 inject node，使用 Function node 代替 function node，使用 Time Series Chart node 代替 ui_chart node。
This flow to gen a 0~50 random integer in period.
Then use ui_chart node to show those integer value.
Flow:
This flow to gen a 0~50 random integer in period.
Then use ui_chart node to show those integer value.
- dashboard random line chart
- dasbboard-random-linechart.PNG (11.41 KiB) Viewed 5433 times
Code: Select all
[{"id":"f038c29e.5a10a","type":"tab","label":"AIC IoT Studio","disabled":false,"info":""},{"id":"11f0540c.92d53b","type":"inject","z":"f038c29e.5a10a","name":"Random Data","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"10","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":150,"y":180,"wires":[["6ee16b22.8021a4"]]},{"id":"6ee16b22.8021a4","type":"function","z":"f038c29e.5a10a","name":"Random Temperature","func":"msg.payload = Math.floor(Math.random() * 50);\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":360,"y":180,"wires":[["ac89da12.57c2b"]]},{"id":"ac89da12.57c2b","type":"ui_chart","z":"f038c29e.5a10a","name":"Temperature Chart","group":"7af5cc00.f3c69c","order":0,"width":0,"height":0,"label":"Temperature","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":"1","removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":530,"y":180,"wires":[[]]},{"id":"7af5cc00.f3c69c","type":"ui_group","name":"Group 1","tab":"60a48b9c.2e0a08","order":1,"disp":true,"width":"6","collapse":false},{"id":"60a48b9c.2e0a08","type":"ui_tab","name":"Tab 1","icon":"dashboard","order":1,"disabled":false,"hidden":false}]