I am trying to get onclick event in template node for a chart. but failing terribly. any guidance on this please.
i am trying to follow this, but not sure how to copy the code into template
Do you have a working chart?
Yes, it is working.
and i pasted the part of the code as suggested by the article, but nothing happens.
Incorrect statement, hiding it
after adding the chart still works, as i know even if one comma is put extra, the chart doesn't render. so the syntax and the location where i have added code, must be correct.
but something wrong in how i percieve onclick event.
I will try provide a chart with dummy data.
My apologies, i do have a working graph, but the code i added is actually making the chart to not render, so i have put the code wrong. i was looking at the wrong instance of the chart and assumed, after putting the extra code, it is still working.
anyways, here is the working chart with dummy static example
[{"id":"e2e91dcf884d20cc","type":"ui-template","z":"ffc4fcc1699193f0","group":"76ecd37ca7f98bc7","name":"E-Chart in a Template Node Horizontal","order":1,"width":"10","height":"12","head":"","format":"<template>\n <div ref=\"charttpw\" style=\"width: 100%; height: 100%\"></div>\n</template>\n\n<script type=\"text/javascript\" src=\"/echarts.min.js\"></script> \n<!-- <script type=\"text/javascript\" src=\"https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js\"></script> -->\n<script>\n\n export default {\n data() {\n return {\n myChart: null\n }\n },\n watch: {\n msg: function () {\n if (this.msg.topic === \"data\") {\n this.update(this.msg.payload.labels, this.msg.payload.data, this.msg.payload.title, this.msg.payload.fs)\n }\n }\n },\n mounted() {\n let interval = setInterval(() => {\n if (window.echarts) {\n clearInterval(interval);\n // now it is loaded, we can initialise and use it\n this.init();\n }\n },100);\n },\n methods: {\n init: function () {\n this.myChart = echarts.init(this.$refs.charttpw, \"dark\");\n // dummy / test data\n const labels = {}\n const data = {}\n const title = \"PLEASE SELECT A DATE RANGE TO GENERATE THE CHART\"\n this.update(labels, data, title,fs)\n },\n update: function (xAxisData, data, title) {\n this.myChart.setOption({\n title: {\n text: title\n },\n tooltip: {\n trigger: \"axis\",\n axisPointer: {\n type: \"cross\",\n },\n },\n toolbox: {\n show: true,\n feature: {\n saveAsImage: {},\n },\n },\n grid: {\n left: \"1%\",\n right: \"1%\",\n //top: '30%',\n containLabel: true,\n },\n xAxis: {\n type: \"value\",\n boundaryGap: true,\n data: xAxisData,\n axisLabel: {\n fontSize:12,\n rotate:0,\n },\n\n },\n yAxis: {\n type: \"category\", // horizontal bar graph\n// type: \"value\", // Vertical bar graph\n\n position:\"left\",\n data: xAxisData,\n // z:3,\n axisLabel: {\n fontSize:18,\n rotate:0,\n color:'lightgreen',\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4,\n },\n// orient: 'horizontal' ,\n axisPointer: {\n snap: true,\n },\n },\n \n visualMap: {\n show: false,\n dimension: 0,\n pieces: [\n { lte: 2, color: \"#e34715\" },\n { gt: 2, lte: 8, color: \"#e37615\" },\n { gt: 8, color: \"#e39e15\" },\n ],\n },\n series: [{\n name: \"Minutes\",\n type: \"bar\",\n smooth: true,\n label:{\n// position: ['50%', '50%'],\n position: 'right',\n distance:20,\n show:true,\n rotate:0,\n fontSize:12,\n color:'white'\n },\n // prettier-ignore\n data: data,\n barWidth: '50%',\n // markArea: {\n // itemStyle: {\n // color: \"rgba(255, 173, 177, 0.4)\",\n // },\n // data: [[{ name: \"Max Peak\", xAxis: \"9:00\" }, { xAxis: \"11:00\" }]],\n // },\n }],\n });\n }\n }\n }\n</script>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":750,"y":4280,"wires":[["e8074c8dac5a1745"]]},{"id":"5fcb60345703412d","type":"inject","z":"ffc4fcc1699193f0","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"dt\":\"Laminate Wrinkles issue\",\"Downtime\":9},{\"dt\":\"Pump-Motor-electrical Issue (Backend)\",\"Downtime\":10},{\"dt\":\"Sealbars Cleaning - Knives Cleaning\",\"Downtime\":16},{\"dt\":\"Machine changeover\",\"Downtime\":17},{\"dt\":\"Coding change\",\"Downtime\":52},{\"dt\":\"2-Startup Setting\",\"Downtime\":59},{\"dt\":\"Laminate Loading\",\"Downtime\":73},{\"dt\":\"Pouch Hanging Issue\",\"Downtime\":86},{\"dt\":\"Startup Setting\",\"Downtime\":96},{\"dt\":\"Pipeline Leak-welding\",\"Downtime\":102},{\"dt\":\"No Product\",\"Downtime\":136},{\"dt\":\"Horizontal Sealing Issue\",\"Downtime\":225},{\"dt\":\"Homogenizer Issue\",\"Downtime\":291},{\"dt\":\"No entry in log book\",\"Downtime\":333},{\"dt\":\"C I P\",\"Downtime\":350},{\"dt\":\"Tea - Lunch Break\",\"Downtime\":564},{\"dt\":\"Other\",\"Downtime\":645}]","payloadType":"json","x":330,"y":4280,"wires":[["e51625e810b5b28f"]]},{"id":"e51625e810b5b28f","type":"change","z":"ffc4fcc1699193f0","name":"Convert","rules":[{"t":"move","p":"payload","pt":"msg","to":"pload","tot":"msg"},{"t":"set","p":"selection","pt":"msg","to":"{\"from\":\"2025-07-01\",\"to\":\"2025-07-13\",\"mc\":\"m01\",\"machine\":\"Machine-1\",\"nick\":\"MAC1\",\"actual\":62434}","tot":"json"},{"t":"set","p":"payload.title","pt":"msg","to":"'Period Chosen: '&selection.from&'-to-'&selection.to&' Selected Machine: '&selection.machine","tot":"jsonata"},{"t":"set","p":"payload.labels","pt":"msg","to":"$$.pload.dt","tot":"jsonata"},{"t":"set","p":"payload.data","pt":"msg","to":"$$.pload.Downtime","tot":"jsonata"},{"t":"set","p":"topic","pt":"msg","to":"data","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":480,"y":4280,"wires":[["e2e91dcf884d20cc"]]},{"id":"76ecd37ca7f98bc7","type":"ui-group","name":"Graph","page":"d0621b8f20aee671","width":"10","height":"1","order":4,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"d0621b8f20aee671","type":"ui-page","name":"Machines","ui":"0aa5ac292a3ec726","path":"/machines","icon":"engine","layout":"flex","theme":"b0fed2b0e19988c3","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":4,"className":"","visible":"true","disabled":"false"},{"id":"0aa5ac292a3ec726","type":"ui-base","name":"DEL MONTE HOSUR","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control","ui-form","ui-text-input","ui-number-input","ui-file-input","ui-button","ui-button-group","ui-radio-group","ui-slider","ui-switch","ui-text","ui-table","ui-chart","ui-gauge","ui-markdown","ui-template","ui-tabulator"],"showPathInSidebar":true,"headerContent":"dashboard","navigationStyle":"temporary","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":"1","showDisconnectNotification":true,"allowInstall":true},{"id":"b0fed2b0e19988c3","type":"ui-theme","name":"MyTheme","colors":{"surface":"#000000","primary":"#059bd6","bgPage":"#050505","groupBg":"#303030","groupOutline":"#297500"},"sizes":{"density":"comfortable","pagePadding":"1px","groupGap":"1px","groupBorderRadius":"2px","widgetGap":"1px"}}]
If you added the click event handler and looked in your console you would have seen errors. This is due to the payload not serialisable due to circular refs. Clone the params and delete the event to avoid that.
let node = this
this.myChart.on('click', function(params) {
const payload = { ...params }
delete payload.event // causes circular ref error
node.send({ payload })
});
1 Like
Thank You So much. Now I can move on making my charts interactive with drill downs
I am posting the sample flow with click event below for anyone it may help.
[{"id":"b78ea0e81bf3d520","type":"group","z":"62c89c281282ae06","name":"","style":{"fill":"#c8e7a7","label":true},"nodes":["948be8471f558360","96afbb347af0febd","b64b0604c42c7ed0","62a408f6b2aecc09","e8b7e58b56118ec0","27d7a1d7d8f3cad6","89e3dc23e1299a89"],"x":114,"y":2119,"w":792,"h":162},{"id":"948be8471f558360","type":"ui-template","z":"62c89c281282ae06","g":"b78ea0e81bf3d520","group":"8be65cf84f273bba","name":"E-Chart in a Template Node- Vertical WITH CLICK","order":1,"width":"24","height":"12","head":"","format":"<template>\n <div ref=\"charttpw\" style=\"width: 100%; height: 100%\"></div>\n</template>\n\n <script type=\"text/javascript\" src=\"/echarts.min.js\"></script> \n<!-- <script type=\"text/javascript\" src=\"https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js\"></script> -->\n<script>\n\n export default {\n data() {\n return {\n myChart: null\n }\n },\n watch: {\n msg: function () {\n if (this.msg.topic === \"data\") {\n this.update(this.msg.payload.labels, this.msg.payload.data, this.msg.payload.title)\n }\n }\n },\n mounted() {\n let interval = setInterval(() => {\n if (window.echarts) {\n clearInterval(interval);\n // now it is loaded, we can initialise and use it\n this.init();\n }\n },100);\n },\n methods: {\n init: function () {\n this.myChart = echarts.init(this.$refs.charttpw, \"dark\");\n // dummy / test data\n const labels = {}\n const data = {}\n const title = \"\"\n this.update(labels, data, title)\n\n let node = this\n this.myChart.on('click', function(params) {\n const payload = { ...params }\n delete payload.event // causes circular ref error\n node.send({ payload })\n });\n \n },\n update: function (xAxisData, data, title) {\n this.myChart.setOption({\n title: {\n text: title\n },\n tooltip: {\n trigger: \"axis\",\n axisPointer: {\n type: \"cross\",\n },\n },\n toolbox: {\n show: true,\n feature: {\n saveAsImage: {},\n },\n },\n grid: {\n left: \"2%\",\n right: \"2%\",\n //top: '2%',\n bottom:'1%',\n containLabel: true,\n },\n xAxis: {\n type: \"category\",\n boundaryGap: true,\n show:true,\n data: xAxisData,\n axisLabel: {\n fontSize:15,\n rotate:45,\n },\n\n },\n yAxis: {\n type: \"value\",\n position:\"left\",\n z:3,\n axisLabel: {\n formatter: \"{value} Min\",\n fontSize:16,\n }, \n splitLine: {\n show: false\n },\n\n orient: 'horizontal' ,\n axisPointer: {\n snap: true,\n },\n },\n \n visualMap: {\n show: false,\n dimension: 0,\n pieces: [\n { lte: 2, color: \"#e34715\" },\n { gt: 2, lte: 8, color: \"#e37615\" },\n { gt: 8, color: \"#e39e15\" },\n ],\n },\n series: [{\n name: \"Minutes\",\n type: \"bar\",\n smooth: true,\n label:{\n// position: ['50%', '50%'],\n position:'top',\n distance:10,\n show:true,\n rotate:0,\n fontSize:16\n },\n // prettier-ignore\n data: data,\n barWidth: '50%',\n }],\n }\n );\n }\n }\n }\n</script>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":690,"y":2160,"wires":[["27d7a1d7d8f3cad6"]]},{"id":"96afbb347af0febd","type":"inject","z":"62c89c281282ae06","g":"b78ea0e81bf3d520","name":"Inject Data","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"nick\":\"MAC1\",\"mc\":\"m01\",\"Machine\":\"MACHINE-1\",\"Downtime\":300},{\"nick\":\"MAC2\",\"mc\":\"m02\",\"Machine\":\"MACHINE-2\",\"Downtime\":80},{\"nick\":\"MAC3\",\"mc\":\"m03\",\"Machine\":\"MACHINE-3\",\"Downtime\":120}]","payloadType":"json","x":220,"y":2200,"wires":[["b64b0604c42c7ed0"]]},{"id":"b64b0604c42c7ed0","type":"change","z":"62c89c281282ae06","g":"b78ea0e81bf3d520","name":"Prepare","rules":[{"t":"set","p":"dt_code","pt":"msg","to":"%","tot":"str"},{"t":"change","p":"dt_code","pt":"msg","from":"%","fromt":"str","to":"All DTs","tot":"str"},{"t":"move","p":"payload","pt":"msg","to":"pload","tot":"msg"},{"t":"set","p":"dt_code_n","pt":"msg","to":"No Plans","tot":"str"},{"t":"set","p":"selection","pt":"msg","to":"{\"from\":\"2025-07-13\",\"to\":\"2025-07-13\"}","tot":"json"},{"t":"set","p":"payload.title","pt":"msg","to":"'Period chosen: '&selection.from&'-to-'&selection.to&' and showing ' &dt_code &' Excluding '&dt_code_n","tot":"jsonata"},{"t":"set","p":"payload.labels","pt":"msg","to":"$$.pload.Machine","tot":"jsonata"},{"t":"set","p":"payload.data","pt":"msg","to":"$$.pload.Downtime","tot":"jsonata"},{"t":"set","p":"topic","pt":"msg","to":"data","tot":"str"},{"t":"set","p":"title","pt":"msg","to":"Click on Load Data to generate chart","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":380,"y":2160,"wires":[["948be8471f558360"]]},{"id":"62a408f6b2aecc09","type":"ui-notification","z":"62c89c281282ae06","g":"b78ea0e81bf3d520","ui":"0aa5ac292a3ec726","position":"center center","colorDefault":false,"color":"#e4f500","displayTime":"1","showCountdown":true,"outputs":1,"allowDismiss":true,"dismissText":"Close","allowConfirm":false,"confirmText":"Confirm","raw":true,"className":"","name":"","x":790,"y":2240,"wires":[[]]},{"id":"e8b7e58b56118ec0","type":"change","z":"62c89c281282ae06","g":"b78ea0e81bf3d520","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"'<p bgcolor = \"blue\">You clicked on '&payload.name&' which was down for '&payload.data&' '&payload.seriesName&'</p>'","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":580,"y":2240,"wires":[["62a408f6b2aecc09"]]},{"id":"27d7a1d7d8f3cad6","type":"switch","z":"62c89c281282ae06","g":"b78ea0e81bf3d520","name":"","property":"payload.type","propertyType":"msg","rules":[{"t":"eq","v":"click","vt":"str"}],"checkall":"true","repair":false,"outputs":1,"x":550,"y":2200,"wires":[["e8b7e58b56118ec0"]]},{"id":"89e3dc23e1299a89","type":"ui-button","z":"62c89c281282ae06","g":"b78ea0e81bf3d520","group":"8be65cf84f273bba","name":"","label":"Load Data","order":0,"width":0,"height":0,"emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"[{\"nick\":\"MAC1\",\"mc\":\"m01\",\"Machine\":\"MACHINE-1\",\"Downtime\":300},{\"nick\":\"MAC2\",\"mc\":\"m02\",\"Machine\":\"MACHINE-2\",\"Downtime\":80},{\"nick\":\"MAC3\",\"mc\":\"m03\",\"Machine\":\"MACHINE-3\",\"Downtime\":120}]","payloadType":"json","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":210,"y":2160,"wires":[["b64b0604c42c7ed0"]]},{"id":"8be65cf84f273bba","type":"ui-group","name":"GRAPH","page":"c8690e5bce80ab2a","width":"24","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"0aa5ac292a3ec726","type":"ui-base","name":"DEL MONTE HOSUR","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control","ui-form","ui-text-input","ui-number-input","ui-file-input","ui-button","ui-button-group","ui-radio-group","ui-slider","ui-switch","ui-text","ui-table","ui-chart","ui-gauge","ui-markdown","ui-template","ui-tabulator"],"showPathInSidebar":true,"headerContent":"dashboard","navigationStyle":"temporary","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":"1","showDisconnectNotification":true,"allowInstall":true},{"id":"c8690e5bce80ab2a","type":"ui-page","name":"Analysis","ui":"0aa5ac292a3ec726","path":"/analysis","icon":"database-eye","layout":"flex","theme":"b0fed2b0e19988c3","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"24"}],"order":5,"className":"","visible":"true","disabled":"false"},{"id":"b0fed2b0e19988c3","type":"ui-theme","name":"MyTheme","colors":{"surface":"#000000","primary":"#059bd6","bgPage":"#050505","groupBg":"#303030","groupOutline":"#297500"},"sizes":{"density":"comfortable","pagePadding":"1px","groupGap":"1px","groupBorderRadius":"2px","widgetGap":"1px"}}]
1 Like
