Need Advice For 2 Different X Axis Position

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!