Graph in UIBuilder

I'm starting now in UIBUILDER and I would like to say that I loved the concept of NODE, congratulations to the creator.

But I need help because I'm starting now.

I want to get the data that comes from a database in json and plot it in the HTML page, but I'm a little lost in the Javascript code.

image

[{"id":"b5febcf77464d16a","type":"uibuilder","z":"fbe81b31e13dc59f","name":"","topic":"","url":"relat","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"templateFolder":"blank","extTemplate":"","showfolder":false,"reload":true,"sourceFolder":"src","deployedVersion":"6.4.1","showMsgUib":false,"credentials":{},"x":1180,"y":580,"wires":[[],[]]},{"id":"07562d9d62e675af","type":"inject","z":"fbe81b31e13dc59f","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"update mything","payload":"","payloadType":"date","x":830,"y":740,"wires":[["b5febcf77464d16a"]]},{"id":"30348a50a7debf2d","type":"uibuilder","z":"fbe81b31e13dc59f","name":"","topic":"","url":"teste","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"templateFolder":"iife-blank-client","extTemplate":"","showfolder":false,"reload":false,"sourceFolder":"src","deployedVersion":"6.4.1","showMsgUib":false,"x":1200,"y":680,"wires":[[],[]]},{"id":"35f4c63b7de947fc","type":"inject","z":"fbe81b31e13dc59f","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":820,"y":800,"wires":[["30348a50a7debf2d"]]},{"id":"69be21c5068470a9","type":"debug","z":"fbe81b31e13dc59f","name":"debug 12","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":1020,"y":520,"wires":[]},{"id":"fa636c229dee5e5e","type":"group","z":"fbe81b31e13dc59f","name":"Graph - Deep Diver","style":{"label":true,"stroke":"#92d04f","fill":"#c8e7a7"},"nodes":["468736aaa97366e3","0bbd98b75a7118ee","9309d8cc90fba932","75fcc32b72d6e064"],"x":474,"y":439,"w":392,"h":182},{"id":"4639c7fae2510b5a","type":"subflow","name":"exec_BD","info":"","category":"","in":[{"x":80,"y":100,"wires":[{"id":"8cc0b55b7d0743c0"}]}],"out":[{"x":1020,"y":100,"wires":[{"id":"4135b832b386a610","port":0}]}],"env":[],"meta":{},"color":"#DDAA99","status":{"x":1020,"y":200,"wires":[{"id":"84933fc7168ae2b4","port":0}]}},{"id":"8cc0b55b7d0743c0","type":"change","z":"4639c7fae2510b5a","name":"copy flow/global to msg","rules":[{"t":"set","p":"payload","pt":"msg","to":"{}","tot":"json"},{"t":"set","p":"payload.ip","pt":"msg","to":"#:(persistent)::IP_vGlobalBD","tot":"global"},{"t":"set","p":"payload.porta","pt":"msg","to":"#:(persistent)::Porta_vGlobalBD","tot":"global"},{"t":"set","p":"payload.usuario","pt":"msg","to":"#:(persistent)::Usuario_vGlobalBD","tot":"global"},{"t":"set","p":"payload.senha","pt":"msg","to":"#:(persistent)::Senha_vGlobalBD","tot":"global"},{"t":"set","p":"payload.nomeBD","pt":"msg","to":"#:(persistent)::NomeBD_vGlobalBD","tot":"global"}],"action":"","property":"","from":"","to":"","reg":false,"x":290,"y":100,"wires":[["effa65099dd2a525"]]},{"id":"4135b832b386a610","type":"mysql2","z":"4639c7fae2510b5a","name":"","server":"","bind":"","topic":"","x":760,"y":100,"wires":[[]]},{"id":"effa65099dd2a525","type":"function","z":"4639c7fae2510b5a","name":"prep_MQTT_Conn","func":"\nconst ip = msg.payload.ip\nconst porta = msg.payload.porta\nconst usuario = msg.payload.usuario\nconst senha = msg.payload.senha\nconst nomeBD = msg.payload.nomeBD\n\nmsg.server = {\n    \"host\": ip,\n    \"port\": porta,\n    \"username\": usuario,\n    \"password\": senha,\n    \"db\": nomeBD\n}\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":550,"y":100,"wires":[["4135b832b386a610"]]},{"id":"eb96b8b79efaea17","type":"change","z":"4639c7fae2510b5a","name":"","rules":[{"t":"set","p":"server","pt":"msg","to":"{'host': $globalContext('IP_vGlobalBD'),\t 'port': $globalContext('Porta_vGlobalBD'),\t 'username': $globalContext('Usuario_vGlobalBD'),\t 'password': $globalContext('Senha_vGlobalBD'),\t 'bd': \"TelemetriaEnervision\"\t }","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":260,"y":260,"wires":[[]]},{"id":"4a50ea77c5d0ed5b","type":"comment","z":"4639c7fae2510b5a","name":"Quem sabe futuro usar esse Change","info":"Não consegui fazer funcionar com o mysql2, ele diz que o nome do banco de dados não está selecionado.","x":320,"y":220,"wires":[]},{"id":"84933fc7168ae2b4","type":"status","z":"4639c7fae2510b5a","name":"","scope":null,"x":840,"y":200,"wires":[[]]},{"id":"1a924288b2bd59bd","type":"comment","z":"4639c7fae2510b5a","name":"Variaveis Globais, com as informações do BD","info":"As informações sobre a conexão ao Banco de dados estão nas variaveis globais do banco de dados.","x":350,"y":60,"wires":[]},{"id":"468736aaa97366e3","type":"function","z":"fbe81b31e13dc59f","g":"fa636c229dee5e5e","name":"f_SQL","func":"\nmsg.topic = \"Select (UNIX_TIMESTAMP(RegistroT)*1000) as x, (-1 * Profundidade) as y from TelemetriaMergulho Where nMergulho = \" + msg.payload\n\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":550,"y":480,"wires":[["75fcc32b72d6e064"]]},{"id":"0bbd98b75a7118ee","type":"change","z":"fbe81b31e13dc59f","g":"fa636c229dee5e5e","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"[\t   {\t       \"series\":[\"temp\"],\t       \"data\":[ [$$.payload]],\t       \"labels\":[\"temp\"]\t   }\t]","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":720,"y":540,"wires":[["9309d8cc90fba932"]]},{"id":"9309d8cc90fba932","type":"ui_chart","z":"fbe81b31e13dc59f","g":"fa636c229dee5e5e","name":"","group":"efc4e9217b9d46c1","order":23,"width":20,"height":8,"label":"Mergulho Realizado","chartType":"line","legend":"false","xformat":"auto","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":"120","removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"className":"","x":740,"y":580,"wires":[["b5febcf77464d16a","30348a50a7debf2d","69be21c5068470a9"]]},{"id":"75fcc32b72d6e064","type":"subflow:4639c7fae2510b5a","z":"fbe81b31e13dc59f","g":"fa636c229dee5e5e","name":"","x":690,"y":480,"wires":[["0bbd98b75a7118ee"]]},{"id":"efc4e9217b9d46c1","type":"ui_group","name":"","tab":"e57386a7f237cb26","order":1,"disp":true,"width":22,"collapse":false,"className":""},{"id":"e57386a7f237cb26","type":"ui_tab","name":"Relatório","icon":"fa-bar-chart","order":4,"disabled":false,"hidden":false}]

This is the doubt that I have how will I plot the data? in this constant?

The code above dataG has been tested and works perfect on the chart.

I appreciate a simple help

I got it, the secret is in passing the right JSON.

data = msg.payload[0].data[0];

2 Likes

Glad you were able to sort it your self. :grin:

Well, thank you. Much appreciated.

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