Dashboard tips. ui_chart with linear x-axis

A little example about ui_chart advanced configuration.

Catch the Boson :stuck_out_tongue: :boom:

[{"id":"1076704a.386908","type":"ui_button","z":"7ee51301.a9185c","name":"","group":"c7a27394.057878","order":1,"width":1,"height":1,"passthru":false,"label":"GO","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"date","topic":"reset","x":190,"y":360,"wires":[["1c612e7d.432ac2"]]},{"id":"f84ec1a3.50318","type":"ui_chart","z":"7ee51301.a9185c","name":"","group":"c7a27394.057878","order":5,"width":9,"height":9,"label":"","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","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,"x":750,"y":300,"wires":[[]]},{"id":"9251a607.5109c","type":"inject","z":"7ee51301.a9185c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":".1","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":170,"y":260,"wires":[["46dd99bd.680638","9ba0532e.7658a"]]},{"id":"d936016b.7da5f","type":"function","z":"7ee51301.a9185c","name":"prepare data for chart","func":"if(flow.get('run') == false){\n    return\n}\n\nvar chartdata = context.get(\"chartdata\") || []\nvar pointcount = flow.get(\"chartpoints\") || 100\n// reset button has topic 'reset'. clear all data\nif(msg.topic === \"reset\"){\n context.set(\"chartdata\",[]);\n msg.payload = []\n return msg\n}\n\nmsg.payload.forEach(element => chartdata.push(element))\n\n// limit data collection length\nif(chartdata.length > pointcount){\n chartdata.splice(0, chartdata.length - pointcount)\n}\n//store data set\ncontext.set(\"chartdata\",chartdata);\n\nmsg.payload = [{\n\"series\": [\"A\"],\n\"xAxisID\": 'custom-x-axis',\n\"yAxisID\": 'custom-y-axis',\n\"data\": [chartdata],\n\"labels\": [\"\"]\n}]\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":560,"y":280,"wires":[["f84ec1a3.50318"]]},{"id":"ec9e71e8.8842e","type":"function","z":"7ee51301.a9185c","name":"modify chart options","func":"let 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)']\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":"","x":560,"y":320,"wires":[["f84ec1a3.50318"]]},{"id":"d689bde.df3354","type":"inject","z":"7ee51301.a9185c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":170,"y":320,"wires":[["bc6b8922.6e6cd8"]]},{"id":"46dd99bd.680638","type":"function","z":"7ee51301.a9185c","name":"random data","func":"var data = []\nvar xx,yy\nvar disturb = flow.get('disturb') || {x:0,y:0}\nfor(var i=0;i<50;++i){\n    xx = disturb.x\n    yy = disturb.y\n    \n    if(i %2 == 0){\n        xx = Math.floor(Math.random()*i/8)-i/16\n        yy = Math.floor(Math.random()*i)-i/2\n    }\n    \n    data.push({x:xx,y:yy})\n}\nmsg.payload = data\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":370,"y":280,"wires":[["d936016b.7da5f"]]},{"id":"c4f537f2.375308","type":"ui_template","z":"7ee51301.a9185c","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":190,"y":520,"wires":[[]]},{"id":"1558c4ab.f5e53b","type":"ui_slider","z":"7ee51301.a9185c","name":"","label":"Count","tooltip":"","group":"c7a27394.057878","order":3,"width":6,"height":1,"passthru":true,"outs":"all","topic":"","min":"2","max":"300","step":1,"x":190,"y":460,"wires":[["dc417f97.e6555","56873ec5.06794"]]},{"id":"dc417f97.e6555","type":"change","z":"7ee51301.a9185c","name":"","rules":[{"t":"set","p":"chartpoints","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":390,"y":440,"wires":[[]]},{"id":"56873ec5.06794","type":"ui_text","z":"7ee51301.a9185c","group":"c7a27394.057878","order":4,"width":1,"height":1,"name":"","label":"","format":"{{msg.payload}}","layout":"row-center","x":350,"y":480,"wires":[]},{"id":"166fe50e.c7838b","type":"function","z":"7ee51301.a9185c","name":"disturb","func":"flow.set('disturb',{x:Math.floor(Math.random()*50)-25,y:Math.floor(Math.random()*50)-25})\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":510,"y":240,"wires":[[]]},{"id":"9ba0532e.7658a","type":"function","z":"7ee51301.a9185c","name":"focus to zero","func":"var disturb = flow.get('disturb')||{x:0,y:0}\nif(Math.abs(disturb.x) > 0.01){\n    disturb.x *= 1 - Math.random()*0.5\n}else{\n     disturb.x = 0\n}\nif(Math.abs(disturb.y) > 0.01){\n    disturb.y *= 1 - Math.random() * 0.5\n}\nelse{\n    disturb.y = 0\n}\nflow.set('disturb',disturb)\nif(disturb.y == 0){\n    return msg;\n}\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":370,"y":240,"wires":[["166fe50e.c7838b"]]},{"id":"bc6b8922.6e6cd8","type":"change","z":"7ee51301.a9185c","name":"","rules":[{"t":"set","p":"run","pt":"flow","to":"false","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":370,"y":320,"wires":[["ec9e71e8.8842e"]]},{"id":"1c612e7d.432ac2","type":"change","z":"7ee51301.a9185c","name":"","rules":[{"t":"set","p":"run","pt":"flow","to":"true","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":370,"y":360,"wires":[[]]},{"id":"458505c0.4e69dc","type":"ui_button","z":"7ee51301.a9185c","name":"","group":"c7a27394.057878","order":2,"width":1,"height":1,"passthru":false,"label":"STOP","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"date","topic":"reset","x":190,"y":400,"wires":[["53696830.dabf38"]]},{"id":"53696830.dabf38","type":"change","z":"7ee51301.a9185c","name":"","rules":[{"t":"set","p":"run","pt":"flow","to":"false","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":370,"y":400,"wires":[[]]},{"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}]

Alert - can be CPU intensive !!

1 Like

Line chart with scan-line update

image

[{"id":"f84ec1a3.50318","type":"ui_chart","z":"7ee51301.a9185c","name":"","group":"c7a27394.057878","order":5,"width":9,"height":"6","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,"x":750,"y":300,"wires":[[]]},{"id":"9251a607.5109c","type":"inject","z":"7ee51301.a9185c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":".02","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":210,"y":280,"wires":[["146b04a0.ed33cb"]]},{"id":"ec9e71e8.8842e","type":"function","z":"7ee51301.a9185c","name":"modify chart options","func":"let gridcolors = 'rgba(255, 160, 0, 0.3)'\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: 60,\n                    min: 0,\n                    stepSize: 10\n                   \n                }\n            }],\n            yAxes: [{\n                id: 'custom-y-axis',\n                \n                gridLines:{\n                    color:gridcolors,\n                    zeroLineColor:'red',\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":"","x":520,"y":320,"wires":[["f84ec1a3.50318"]]},{"id":"d689bde.df3354","type":"inject","z":"7ee51301.a9185c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":210,"y":320,"wires":[["ec9e71e8.8842e"]]},{"id":"46dd99bd.680638","type":"function","z":"7ee51301.a9185c","name":"data collection","func":"var data = context.get('data') || []\n\nif(data.length == 0){\n    data.push(msg.payload)\n}\nelse{\n    var idx = data.findIndex( element => element.x == msg.payload.x)\n    if(idx == -1){\n        //x-axis value does not exist. create new datapoint\n        data.push(msg.payload)\n        // sort data as  x-axis values must be in linear order\n        data.sort((a, b) => a.x - b.x);\n    }\n    else{\n        //x-axis value exist. update y value for that datapoint\n        data[idx].y = msg.payload.y\n        // make scanline\n        if(idx < data.length - 2){\n            data[idx + 1].y = null\n        }\n    }\n}\n\n\ncontext.set('data',data)\n\n\n\nmsg.payload = [{\n    \"series\": [\"A\"],\n    \"xAxisID\": 'custom-x-axis',\n    \"yAxisID\": 'custom-y-axis',\n    \"data\": [data],\n    \"labels\": [\"\"]\n}]\n\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":540,"y":280,"wires":[["8f963860.bf5468","f84ec1a3.50318"]]},{"id":"c4f537f2.375308","type":"ui_template","z":"7ee51301.a9185c","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        background-image:linear-gradient(0.5turn, #f69d3c00,#f69d3c20, #f69d3c00);\n    }\n    \n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":190,"y":360,"wires":[[]]},{"id":"146b04a0.ed33cb","type":"function","z":"7ee51301.a9185c","name":"random data","func":"var peak = 25\nvar xp = context.get('xp') || 0\nxp += 0.5\nif(xp > 60){\n    xp = 0\n}\ncontext.set('xp',xp)\nvar data = {}\ndata.x= xp\nvar amp = (Math.random() * (((70 - xp) - (data.x/2))) - (10 - data.x % 10))\ndata.y = (Math.random()*amp)-amp/2\n\nmsg.payload = data\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":370,"y":280,"wires":[["46dd99bd.680638"]]},{"id":"8f963860.bf5468","type":"debug","z":"7ee51301.a9185c","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":770,"y":260,"wires":[]},{"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","order":1,"disabled":false,"hidden":false}]
1 Like