Hi, i was able to draw two charts in two different tabs, but i would like to put them on the same. When i'm changing the Group property Tab value to have them on the same "page" the charts are getting messy and the same data get drawn twice in the same group instead to draw another chart in separate group which remain empty. here is a flow chart, i'm using:
[{"id":"78172dcd.3defec","type":"function","z":"57181f14.70a708","name":"Select MOULDING from DB","func":"msg.topic=\"select distinct simulate_machine_id, count(rfid_short_id) as num_det from rfid_msg_arch where simulate_category = 'MOULDING' and ts_receive >= STR_TO_DATE('2018-09-10 08:40:02.000000', '%Y-%m-%d %H:%i:%s') - interval 1 minute and ts_receive <= STR_TO_DATE('2018-09-10 08:40:02.000000', '%Y-%m-%d %H:%i:%s') + interval 1 minute group by simulate_machine_id;\"\nvar moulding = flow.get(\"moulding\");\nflow.set(\"moulding\",\"MOULDING\");\nreturn msg;","outputs":2,"noerr":0,"x":420,"y":780,"wires":[["2f38c622.d3900a"],[]]},{"id":"2f38c622.d3900a","type":"mysql","z":"57181f14.70a708","mydb":"4732d663.8c3c8","name":"DTWIN","x":640,"y":780,"wires":[["d1a49e16.4c35b"]]},{"id":"d1a49e16.4c35b","type":"function","z":"57181f14.70a708","name":"transform data","func":" msg.options = [];\n\n//create empty array\nfor(let i = 0; i < msg.payload.length; i++){\n let row = msg.payload[i]; //get the row\n let opt = {};//make new opt object\n opt[row.num_det] = row.num_det;\n opt[row.simulate_machine_id] = row.simulate_machine_id;\n msg.options.push(row);// return object as in the input\n // msg.options.push(opt);//add the opt to array \n}\nmsg.payload = msg.options;\n//var msg1 = msg.options;\nreturn msg;\n","outputs":1,"noerr":0,"x":800,"y":800,"wires":[["af722a1d.edc258","33c51ba6.207cfc"]]},{"id":"af722a1d.edc258","type":"ui_template","z":"57181f14.70a708","group":"c031623f.b60bb","name":"moulding area heatmap","order":0,"width":"6","height":"3","format":"<html lang=\"en-US\">\n<head>\n <script src=\"https://cdn.jsdelivr.net/npm/apexcharts\">\n \n </script>\n</head>\n<body>\n <!--{{msg.payload}}-->\n <div id=\"chart\">\n</div>\n\n<script>\nvar data_array;\n(function(scope) {\n // console.log('Position 1');\n //console.dir(scope);\n //console.log(scope.msg);\n scope.$watch('msg.payload', function(data) {\n // console.log('Position 2');\n console.dir(data);\n //var value = data[0];\n data_array = data;\n //msg.payload.length\n //gl_string = data[1];\n //console.log(\"*******\" + value);\n print();\n });\n })(scope);\n \n \nfunction print(){\n var i = 0;\n while (i < data_array.length) {\n let raw = data_array[i];\n var x = raw.simulate_machine_id;\n var y = raw.num_det;\nconsole.log(\"TESTING global ....... x= \" + x + \"y=\" + y + \"i = \" + data_array.length);\n \n i++;\n }\n \n}\n\n function generateData() {\n var i = 0;\n var series = [];\n while (i < data_array.length) {\n let raw = data_array[i];\n var x = raw.simulate_machine_id;\n var y = raw.num_det;\n series.push({\n x: x,\n y: y\n });\n i++;\n }\n console.log(\"kseljrwkl.......... = \" + series+ \"i =\" + i);\n return series;\n }\n\n\n var options = {\n chart: {\n height: 200,\n width:350,\n type: 'heatmap',\n },\n plotOptions: {\n heatmap: {\n shadeIntensity: 0.5,\n\n colorScale: {\n ranges: [{\n from: 0,\n to: 3,\n name: 'low',\n color: '#00A100'\n },\n {\n from: 4,\n to: 7,\n name: 'medium',\n color: '#128FD9'\n }\n ]\n }\n }\n },\n dataLabels: {\n enabled: false\n },\n series: [{\n name: 'NOW',\n data: generateData()\n },\n \n ],\n title: {\n text: 'HeatMap Moulding area'\n },\n\n }\n\n var chart = new ApexCharts(\n document.querySelector(\"#chart\"),\n options\n );\n\n chart.render();\n</script>\n</body>\n\n\n\n</html>","storeOutMessages":false,"fwdInMessages":true,"templateScope":"local","x":1130,"y":780,"wires":[[]]},{"id":"33c51ba6.207cfc","type":"debug","z":"57181f14.70a708","name":"moulding","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":1000,"y":840,"wires":[]},{"id":"d654d536.7873c8","type":"inject","z":"57181f14.70a708","name":"","topic":"","payload":"","payloadType":"date","repeat":"10","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":780,"wires":[["78172dcd.3defec"]]},{"id":"4732d663.8c3c8","type":"MySQLdatabase","z":"","host":"10.41.11.142","port":"3306","db":"dtwin","tz":""},{"id":"c031623f.b60bb","type":"ui_group","z":"","name":"Moulding","tab":"24e710f8.995638","disp":true,"width":"6","collapse":false},{"id":"24e710f8.995638","type":"ui_tab","z":"","name":"Home","icon":"dashboard","order":7}]
the second flow which i wish to put together with another one is very similar:
[{"id":"320e6627.806dca","type":"inject","z":"20fa7ef5.c293da","name":"","topic":"","payload":"","payloadType":"date","repeat":"10","crontab":"","once":false,"onceDelay":0.1,"x":130,"y":560,"wires":[["ea852d1a.15446"]]},{"id":"75284ea2.5ae56","type":"function","z":"20fa7ef5.c293da","name":"transform data","func":"msg.options = [];\n\n//create empty array\nfor(let i = 0; i < msg.payload.length; i++){\n let row = msg.payload[i]; //get the row\n let opt = {};//make new opt object\n opt[row.num_det] = row.num_det;\n opt[row.simulate_machine_id] = row.simulate_machine_id;\n msg.options.push(row);// return object as in the input\n // msg.options.push(opt);//add the opt to array \n}\nmsg.payload = msg.options;\nreturn msg;\n","outputs":1,"noerr":0,"x":760,"y":540,"wires":[["2aac0c43.888804","4b868443.9fcd0c"]]},{"id":"61225d33.9f6214","type":"mysql","z":"20fa7ef5.c293da","mydb":"4732d663.8c3c8","name":"DTWIN","x":580,"y":540,"wires":[["75284ea2.5ae56"]]},{"id":"ea852d1a.15446","type":"function","z":"20fa7ef5.c293da","name":"Select ASSEMBLY from DB","func":"msg.topic=\"select distinct simulate_machine_id, count(rfid_short_id) as num_det from rfid_msg_arch where simulate_category = 'ASSEMBLY' and ts_receive >= STR_TO_DATE('2018-09-10 08:40:02.000000', '%Y-%m-%d %H:%i:%s') - interval 1 minute and ts_receive <= STR_TO_DATE('2018-09-10 08:40:02.000000', '%Y-%m-%d %H:%i:%s') + interval 1 minute group by simulate_machine_id;\"\nvar assembly = flow.get(\"assembly\");\nflow.set(\"assembly\",\"ASSEMBLY\");\nreturn msg;","outputs":1,"noerr":0,"x":340,"y":560,"wires":[["61225d33.9f6214"]]},{"id":"2aac0c43.888804","type":"ui_template","z":"20fa7ef5.c293da","group":"a1abf851.b459","name":"assembly area heatmap","order":0,"width":"7","height":"3","format":"<html lang=\"en-US\">\n<head>\n <script src=\"https://cdn.jsdelivr.net/npm/apexcharts\">\n \n </script>\n</head>\n<body>\n <!--{{msg.payload}}-->\n <div id=\"chart\">\n</div>\n\n<script>\nvar data_array;\n(function(scope) {\n // console.log('Position 1');\n //console.dir(scope);\n //console.log(scope.msg);\n scope.$watch('msg.payload', function(data) {\n // console.log('Position 2');\n console.dir(data);\n //var value = data[0];\n data_array = data;\n //msg.payload.length\n //gl_string = data[1];\n //console.log(\"*******\" + value);\n print();\n });\n })(scope);\n \n \nfunction print(){\n var i = 0;\n while (i < data_array.length) {\n let raw = data_array[i];\n var x = raw.simulate_machine_id;\n var y = raw.num_det;\nconsole.log(\"TESTING global ....... x= \" + x + \"y=\" + y + \"i = \" + data_array.length);\n \n i++;\n }\n \n}\n\n function generateData() {\n var i = 0;\n var series = [];\n while (i < data_array.length) {\n let raw = data_array[i];\n var x = raw.simulate_machine_id;\n var y = raw.num_det;\n series.push({\n x: x,\n y: y\n });\n i++;\n }\n console.log(\"kseljrwkl.......... = \" + series+ \"i =\" + i);\n return series;\n }\n\n\n var options = {\n chart: {\n height: 200,\n width:350,\n type: 'heatmap',\n },\n plotOptions: {\n heatmap: {\n shadeIntensity: 0.5,\n\n colorScale: {\n ranges: [{\n from: 0,\n to: 3,\n name: 'low',\n color: '#00A100'\n },\n {\n from: 4,\n to: 7,\n name: 'medium',\n color: '#128FD9'\n }\n ]\n }\n }\n },\n dataLabels: {\n enabled: false\n },\n series: [{\n name: 'NOW',\n data: generateData()\n },\n \n ],\n title: {\n text: 'HeatMap Assembly area'\n },\n\n }\n\n var chart = new ApexCharts(\n document.querySelector(\"#chart\"),\n options\n );\n\n chart.render();\n</script>\n</body>\n\n\n\n</html>","storeOutMessages":false,"fwdInMessages":true,"templateScope":"local","x":970,"y":540,"wires":[[]]},{"id":"4b868443.9fcd0c","type":"debug","z":"20fa7ef5.c293da","name":"assembly","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":910,"y":600,"wires":[]},{"id":"4732d663.8c3c8","type":"MySQLdatabase","z":"","host":"10.41.11.142","port":"3306","db":"dtwin","tz":""},{"id":"a1abf851.b459","type":"ui_group","z":"","name":"Assembly","tab":"acb68239.db50b8","disp":true,"width":"15","collapse":false},{"id":"acb68239.db50b8","type":"ui_tab","z":"","name":"PLANT HEATMAP","icon":"dashboard","disabled":false,"hidden":false}]
what am i doing wrong?
