Gráfica de dos sensores

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 :slight_smile:

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.