Hello All,
I am making a chart with 2 types of X Axis, one in normal condition and one in invert condition. The two Y Axis data have different topics. I've coded the chart from several references, but they don't seem to work very well. Maybe there is something wrong with my code here, please advise and help.
[{"id":"4cf95f4e.88bf8","type":"function","z":"bd3ff8e6.f0cf38","name":"chart HPU","func":"context.data = context.data || {};\nvar chartdata = context.get(\"chartdata\") || [];\nvar d = new Date().getSeconds();\nvar chartdata2 = context.get(\"chartdata2\") || [];\n\nif(msg.topic === \"reset\"){\n startmoment = undefined;\n context.set(\"startmoment\",startmoment);\n context.set(\"chartdata\",[]);\n msg.payload = [];\n return msg;\n}\nswitch (msg.topic) {\n case \"stroke\":\n context.data.stroke = msg.payload;\n break;\n case \"load\":\n context.data.load = msg.payload;\n break;\n //////for chartdata2\n case \"stroke2\":\n context.data.stroke2 = msg.payload;\n break;\n case \"load2\":\n context.data.load2 = msg.payload;\n break;\n \n}\n\n//var xnew = context.data.stroke;\nvar xnew = d;\n//node.warn(xnew);\nvar ynew = context.data.load;\nvar ob = {x:xnew, y:ynew};\n// collect datapoints\nchartdata.push(ob);\n\ncontext.set(\"chartdata\",chartdata);\n\n////////////////////////////////\nif(msg.topic === \"reset\"){\n startmoment = undefined;\n context.set(\"startmoment\",startmoment);\n context.set(\"chartdata2\",[]);\n msg.payload = [];\n return msg;\n}\n\n\nvar xnew2 = d;\nvar ynew2 = context.data.load2;\nvar ob2 = {x:xnew2, y:ynew2};\nchartdata2.push(ob2);\ncontext.set(\"chartdata2\",chartdata2);\n//////////////////////////////////////////////////////////////////////////////////\n\nmsg.payload = [{\n\"series\": [\"A\",\"B\"],\n\"xAxisID\": 'A,B',\n\"yAxisID\": 'A,B',\n\"data\": [chartdata,chartdata2],\n\"labels\": [\"A\",\"B\"],\n\"align\": 'center'\n}];\n\nmsg.ui_control = {\n options: {\n elements: {\n line: {\n borderWidth: 3,\n fill:false,\n //lineTension:5,\n spanGaps:true,\n // default = 3\n },\n point:{\n radius:1,\n pointStyle:'circle' \n }\n },\n legend: {\n display: false\n },\n scales: {\n \n xAxes: [{id:'A',\n type: 'linear',\n position: 'left',\n gridLines: {\n display:true},\n ticks: {display : true,\n // fontColor:\"#ccc\",\n //max: 100,\n //min :0,\n // autoSkip: true,\n //min: -5,\n //stepSize: 20\n }\n },\n { id:'B',\n type: 'linear',\n position: 'right',\n gridLines: {\n display:true},\n ticks: {display : true,\n //reverse : true,\n // fontColor:\"#ccc\",\n //max: 100,\n //min :0,\n // autoSkip: true,\n //min: -5,\n //stepSize: 20\n }\n }],\n yAxes: [{\n id:'A',\n position:'left',\n gridLines: {\n display:true},\n ticks: {\n display : true,\n max: 12000, //max Y - Axis\n min: 0,\n \n // fontColor:\"#ccc\",\n \n }\n \n },\n {\n id:'B',\n position:'right',\n gridLines: {\n display:true},\n ticks: {\n display :false,\n max: 12000, //max Y - Axis\n min: 0,\n \n // fontColor:\"#ccc\",\n \n }\n \n }\n ]\n }\n }\n};\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":630,"y":1120,"wires":[["2103e211.1f971e","3d99d19a.7e990e"]]},{"id":"57ab45d9.c466bc","type":"inject","z":"bd3ff8e6.f0cf38","name":"normal","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"random","payloadType":"str","x":140,"y":1100,"wires":[["6eed480f.c45cf8"]]},{"id":"6eed480f.c45cf8","type":"function","z":"bd3ff8e6.f0cf38","name":"","func":"const MIN = 1;\n\n\nconst MAX = 9999;\n\n\n//The maximum is exclusive and the minimum is inclusive\n\n\n \n\n\nswitch (msg.payload) {\n\n\n\ncase \"undefined\" :\n\n\nmsg.payload = undefined;\n\n\nbreak;\n\n\n\ncase \"null\" :\n\n\nmsg.payload = null;\n\n\nbreak;\n\n\n\ncase \"random\" :\n\n\nmsg.payload =function getRandomInt(min = MIN, max = MAX) {\n\n\n min = Math.ceil(min);\n\n\n max = Math.floor(max);\n\n\n return Math.floor(Math.random() * (max - min)) + min;\n\n\n}();\n\n\nbreak;\n\n\n}\n\nmsg.topic=\"load\";\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":380,"y":1100,"wires":[["4cf95f4e.88bf8"]]},{"id":"2103e211.1f971e","type":"ui_chart","z":"bd3ff8e6.f0cf38","name":"","group":"acf73a7d.377d6","order":8,"width":0,"height":0,"label":"test","chartType":"line","legend":"false","xformat":"ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#e9afaf","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":810,"y":1180,"wires":[[]]},{"id":"d5261df7.39106","type":"inject","z":"bd3ff8e6.f0cf38","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"reset","payload":"[]","payloadType":"json","x":390,"y":1200,"wires":[["4cf95f4e.88bf8"]]},{"id":"6b1238bd.a91188","type":"inject","z":"bd3ff8e6.f0cf38","name":"invert","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"random","payloadType":"str","x":150,"y":1140,"wires":[["48b6fe0a.55e96"]]},{"id":"48b6fe0a.55e96","type":"function","z":"bd3ff8e6.f0cf38","name":"","func":"const MIN = 1;\n\n\nconst MAX = 9999;\n\n\n//The maximum is exclusive and the minimum is inclusive\n\n\n \n\n\nswitch (msg.payload) {\n\n\n\ncase \"undefined\" :\n\n\nmsg.payload = undefined;\n\n\nbreak;\n\n\n\ncase \"null\" :\n\n\nmsg.payload = null;\n\n\nbreak;\n\n\n\ncase \"random\" :\n\n\nmsg.payload =function getRandomInt(min = MIN, max = MAX) {\n\n\n min = Math.ceil(min);\n\n\n max = Math.floor(max);\n\n\n return Math.floor(Math.random() * (max - min)) + min;\n\n\n}();\n\n\nbreak;\n\n\n}\n\nmsg.topic=\"load2\";\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":390,"y":1140,"wires":[["4cf95f4e.88bf8"]]},{"id":"3d99d19a.7e990e","type":"debug","z":"bd3ff8e6.f0cf38","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":830,"y":1120,"wires":[]},{"id":"acf73a7d.377d6","type":"ui_group","name":"HPU-001","tab":"ecf3f0db.949cd8","order":2,"disp":true,"width":"6","collapse":false},{"id":"ecf3f0db.949cd8","type":"ui_tab","name":"home","icon":"dashboard","order":2,"disabled":false,"hidden":true}]
Thank You Very Much!
