Hola a todos, tengo una pregunta. Es posible agregar una gráfica de dos sensores? Pero que los datos no estén separados, por ejemplo que sensor 1 sea x y sensor 2 sea y. Por lo tanto mostrar Xvs Y
Hello and welcome 
Your question in English:
Hello everyone, I have a question. Is it possible to add a graph of two sensors? But that the data is not separated, for example that sensor 1 is x and sensor 2 is y. Therefore show X vs Y
It is possible but it is not something you can simply configure via chart configuration page.
Here's an example how it can be achieved. See comments inside nodes.
[{"id":"f84ec1a3.50318","type":"ui_chart","z":"09deee63c1b960f7","name":"","group":"c7a27394.057878","order":5,"width":9,"height":9,"label":"","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"bezier","nodata":"","dot":false,"ymin":"-30","ymax":"30","removeOlder":"24","removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#00b3ff","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"className":"","x":770,"y":1880,"wires":[[]]},{"id":"9251a607.5109c","type":"inject","z":"09deee63c1b960f7","name":"sensor_x","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"1","crontab":"","once":true,"onceDelay":0.1,"topic":"sensor_x","payload":"$random()*60 - 30\t","payloadType":"jsonata","x":130,"y":1840,"wires":[["46dd99bd.680638"]]},{"id":"d936016b.7da5f","type":"function","z":"09deee63c1b960f7","name":"prepare data for chart","func":"// the chart takes the data in correct format.\nmsg.payload = [{\n \"series\": [\"A\"],\n \"xAxisID\": 'custom-x-axis',\n \"yAxisID\": 'custom-y-axis',\n \"data\": [msg.payload],\n \"labels\": [\"\"]\n}]\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":580,"y":1840,"wires":[["f84ec1a3.50318","f4ccccf993a40235"]]},{"id":"ec9e71e8.8842e","type":"function","z":"09deee63c1b960f7","name":"modify chart options","func":"// change the chart look and feel.\n// x-axis changed from time to linear\n// different grid line colors\n\nlet gridcolors = ['rgba(255, 0, 0, 0.5)','rgba(255, 160, 0, 0.5)','rgba(0, 217, 37, 0.5)','rgba(0, 217, 37, 0)','rgba(0, 217, 37, 0.5)','rgba(255, 160, 0, 0.5)','rgba(255, 0, 0, 0.5)']\n\nmsg.ui_control = {\n options: {\n legend: {\n display: false\n },\n tooltips: {\n enabled: false\n },\n scales: {\n xAxes: [{\n type: 'linear',\n id: 'custom-x-axis',\n position:'bottom',\n padding:100,\n gridLines:{\n color:gridcolors,\n zeroLineColor:'rgba(123, 113, 113, 0.75)',\n tickMarkLength:7,\n drawTicks:false\n },\n ticks: {\n fontColor:\"#ccc\",\n max: 30,\n min: -30,\n stepSize: 10\n \n }\n }],\n yAxes: [{\n id: 'custom-y-axis',\n \n gridLines:{\n color:gridcolors,\n zeroLineColor:'rgba(123, 113, 113, 0.75)',\n tickMarkLength:5,\n drawTicks:false\n },\n ticks: {\n fontColor:\"#ccc\",\n max: 30,\n min: -30,\n stepSize: 10\n }\n }]\n }\n }\n}\ndelete msg.payload\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":580,"y":1920,"wires":[["f84ec1a3.50318"]]},{"id":"d689bde.df3354","type":"inject","z":"09deee63c1b960f7","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":150,"y":1920,"wires":[["ec9e71e8.8842e"]]},{"id":"46dd99bd.680638","type":"function","z":"09deee63c1b960f7","name":"store and send data","func":"let data = context.get(\"data\") || []\nlet partial = context.get(\"partial\") || {x:false,y:false}\n//limit how many datapoints to store\nconst limit = 20\n\n\nconst storeAndSend = () => {\n data.push(partial)\n if(data.length > limit){\n data.shift()\n }\n //send out all stored points \n node.send({payload:data})\n // clear partial to be ready to receive data for next point\n context.set(\"partial\", { x: false, y: false });\n // store the collection of points\n context.set(\"data\", data);\n}\n\n// store sensor data to the partial\n// if partial has data from both sensors, this point can be \n// stored into the collection and sent to the chart.\nswitch (msg.topic){\n case \"sensor_x\":{\n partial.x = msg.payload\n if(partial.y !== false){\n storeAndSend()\n }\n else {\n //store the partial data\n context.set(\"partial\", partial);\n }\n break\n }\n case \"sensor_y\":{\n partial.y = msg.payload\n if (partial.x !== false) {\n storeAndSend()\n }\n else {\n //store the partial data\n context.set(\"partial\", partial);\n }\n break\n }\n // arbitrary input clears data collection\n default:{\n data = []\n context.set(\"data\", data);\n }\n}\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":360,"y":1840,"wires":[["d936016b.7da5f"]]},{"id":"c4f537f2.375308","type":"ui_template","z":"09deee63c1b960f7","group":"c7a27394.057878","name":"CSS","order":6,"width":0,"height":0,"format":"<style>\n canvas.chart.chart-line {\n height:calc(100%) !important;\n width: calc(100%) !important;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":770,"y":1840,"wires":[[]]},{"id":"f4ccccf993a40235","type":"debug","z":"09deee63c1b960f7","name":"debug 12","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":780,"y":1780,"wires":[]},{"id":"12ea539541fae0d4","type":"inject","z":"09deee63c1b960f7","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[]","payloadType":"json","x":610,"y":1880,"wires":[["f84ec1a3.50318"]]},{"id":"24b198b277459fe4","type":"inject","z":"09deee63c1b960f7","name":"sensor_y","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"1.1","crontab":"","once":true,"onceDelay":0.1,"topic":"sensor_y","payload":"$random()*60 - 30\t","payloadType":"jsonata","x":130,"y":1880,"wires":[["46dd99bd.680638"]]},{"id":"d49a4e6a25376209","type":"inject","z":"09deee63c1b960f7","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"clear","payload":"","payloadType":"date","x":140,"y":1800,"wires":[["46dd99bd.680638"]]},{"id":"c7a27394.057878","type":"ui_group","name":"CHART","tab":"54e197d8.7f7fe8","order":2,"disp":false,"width":"9","collapse":false},{"id":"54e197d8.7f7fe8","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
1 Like
@hotNipi
Thank you very much, I'll try it. I think I only have to modify the inputs because in my case they come from a mqtt sensor.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
