I have a template node improvised from Forum example, (Thanks! @Steve-Mcl )
`How to configure Echarts in Dashboard 2? - #4 by Steve-Mcl
i am trying to get it convert to a horozontal bar graph, but unsuccessful. i looked into e-charts doc and couldn't find any specific details on it.
[{"id":"c90da7fcdaaaf29b","type":"inject","z":"62c89c281282ae06","name":"","props":[],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":390,"y":540,"wires":[["46b016dc2875251c"]]},{"id":"46b016dc2875251c","type":"change","z":"62c89c281282ae06","name":"","rules":[{"t":"set","p":"topic","pt":"msg","to":"data","tot":"str"},{"t":"set","p":"selection","pt":"msg","to":"{\"from\":\"2025-02-01\",\"to\":\"2025-02-04\"}","tot":"json"},{"t":"set","p":"pload","pt":"msg","to":"[{\"nick\":\"SP5\",\"mc\":\"m20\",\"Machine\":\"SAMARPAN-5\",\"Downtime\":3050},{\"nick\":\"PFSL\",\"mc\":\"m05\",\"Machine\":\"PFS-L\",\"Downtime\":2931},{\"nick\":\"AP2\",\"mc\":\"m15\",\"Machine\":\"AKASHPACK-2\",\"Downtime\":2420},{\"nick\":\"MSP1\",\"mc\":\"m01\",\"Machine\":\"MESPACK-1\",\"Downtime\":2355},{\"nick\":\"BTP2\",\"mc\":\"m22\",\"Machine\":\"BOATOPACK-2\",\"Downtime\":1084},{\"nick\":\"SP4\",\"mc\":\"m03\",\"Machine\":\"SAMARPAN-4\",\"Downtime\":989},{\"nick\":\"CR3\",\"mc\":\"m00\",\"Machine\":\"CRYOVAC-3KG\",\"Downtime\":960},{\"nick\":\"BTP1\",\"mc\":\"m02\",\"Machine\":\"BOATOPACK-1\",\"Downtime\":960},{\"nick\":\"CR1\",\"mc\":\"m07\",\"Machine\":\"CRYOVAC-1KG\",\"Downtime\":960},{\"nick\":\"CFT\",\"mc\":\"m09\",\"Machine\":\"CFT FILLER\",\"Downtime\":960},{\"nick\":\"14T\",\"mc\":\"m10\",\"Machine\":\"14 TRACK\",\"Downtime\":960},{\"nick\":\"12T\",\"mc\":\"m11\",\"Machine\":\"12 TRACK\",\"Downtime\":960},{\"nick\":\"MSP2\",\"mc\":\"m16\",\"Machine\":\"MESPACK-2\",\"Downtime\":960},{\"nick\":\"BAGR\",\"mc\":\"m18\",\"Machine\":\"BAGGER\",\"Downtime\":960},{\"nick\":\"DIP\",\"mc\":\"m23\",\"Machine\":\"DIPCUP\",\"Downtime\":960},{\"nick\":\"SP3\",\"mc\":\"m04\",\"Machine\":\"SAMARPAN-3\",\"Downtime\":851},{\"nick\":\"BTP3\",\"mc\":\"m21\",\"Machine\":\"BOATOPACK-3\",\"Downtime\":732},{\"nick\":\"PFSR\",\"mc\":\"m06\",\"Machine\":\"PFS-R\",\"Downtime\":480},{\"nick\":\"JUC\",\"mc\":\"m08\",\"Machine\":\"JUICE\",\"Downtime\":33}]","tot":"json"},{"t":"set","p":"payload","pt":"msg","to":"{\"title\":\"Period Chosen 2025-02-01-2025-02-04\",\"labels\":[\"m20\",\"m05\",\"m15\",\"m01\",\"m22\",\"m03\",\"m00\",\"m02\",\"m07\",\"m09\",\"m10\",\"m11\",\"m16\",\"m18\",\"m23\",\"m04\",\"m21\",\"m06\",\"m08\"],\"data\":[3050,2931,2420,2355,1084,989,960,960,960,960,960,960,960,960,960,851,732,480,33]}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":620,"y":540,"wires":[["0259916f6bcf7f4f","12c477a8518e7625"]]},{"id":"0259916f6bcf7f4f","type":"ui-template","z":"62c89c281282ae06","group":"8be65cf84f273bba","name":"E-Chart in a Template Node","order":4,"width":"24","height":"7","head":"","format":"<template>\n <div ref=\"charttpw\" style=\"width: 100%; height: 400px\"></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 = \"PLEASE SELECT A DATE RANGE TO GENERATE THE CHART\"\n this.update(labels, data, title)\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: \"category\",\n boundaryGap: true,\n data: xAxisData,\n axisLabel: {\n fontSize:15,\n rotate:45,\n },\n\n },\n yAxis: {\n type: \"value\",\n axisLabel: {\n formatter: \"{value} Min\",\n fontSize:16,\n },\n orient: 'horizontal' ,\n axisPointer: {\n snap: true,\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 distance:10,\n show:true,\n rotate:90,\n fontSize:18\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":920,"y":540,"wires":[["89e3ec72bb205ef2"]]},{"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":"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":3,"className":"","visible":"true","disabled":"false"},{"id":"0aa5ac292a3ec726","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":false,"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,"showPageTitle":true,"navigationStyle":"temporary","titleBarStyle":"fixed","showReconnectNotification":true,"notificationDisplayTime":"1","showDisconnectNotification":true},{"id":"b0fed2b0e19988c3","type":"ui-theme","name":"MyTheme","colors":{"surface":"#000000","primary":"#059bd6","bgPage":"#050505","groupBg":"#303030","groupOutline":"#297500"},"sizes":{"density":"default","pagePadding":"2px","groupGap":"10px","groupBorderRadius":"10px","widgetGap":"2px"}}]
I want something like this...
as per the docs, i tried
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
but is not working..
