Funnel Chart in Dashboard 2

[guillad]

Hi all,

I'm struggling to implement the horizontal Funnel Chart below in dashboard 2.0 template node,
and could use some help. I'm considering these two libraries (Option 1 is preferable):

1. Vue Funnel Graph - Funnel graph drawing library for Vue.js.
2. D3 Clone of FunnelGraph.js - a D3.js implementation of a funnel chart.

Here's my broken flow, based on the Echarts demo solution:

[{"id":"5b58efcc9731e50a","type":"ui-template","z":"9bcf538d070db3bc","group":"5a24a7294e508359","page":"","ui":"","name":"Funnel Chart","order":2,"width":0,"height":0,"head":"","format":"<template>\n\n  <div id=\"funnel-graph\"></div>\n</template>\n\n\n<script src=\"https://unpkg.com/vue-funnel-graph-js/dist/vue-funnel-graph.min.js\"></script>\n\n<script>\n\n  function init() {\n\n   \n          :width=\"width\"\n          :height=\"height\"\n          :labels=\"labels\"\n          :values=\"values\"\n          :colors=\"colors\"\n          :sub-labels=\"subLabels\"\n          :direction=\"direction\"\n          :gradient-direction=\"gradientDirection\"\n          :animated=\"true\"\n          :display-percentage=\"true\"},\n  \n      data: {\n        width: 400,\n        height: 400,\n        labels: ['Step 1', 'Step 2', 'Step 3', 'Step 4'],\n        subLabels: ['Sub 1', 'Sub 2', 'Sub 3'],\n        values: [[600, 400, 200, 100], [300, 200, 100, 50]],\n        colors: ['#FF5733', '#33FF57', '#3357FF'],\n        gradientDirection: 'horizontal',\n        direction: 'vertical'\n      }\n    });\n  }\n\n  // Run this code when the widget is built\n  let interval = setInterval(() => {\n    if (window.FunnelGraph) {\n      // Call init() to use VueFunnelGraph\n      init();\n      clearInterval(interval);\n    }\n  }, 100);\n</script>\n\n<style>\n  /* Define any styles here - supports raw CSS */\n  #funnel-graph {\n    width: 100%;\n    height: 400px;\n  }\n</style>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":490,"y":400,"wires":[[]]},{"id":"5a24a7294e508359","type":"ui-group","name":"Support","page":"22c235c0282c88f2","width":"12","height":"1","order":1,"showTitle":false,"className":"","visible":"true","disabled":"false"},{"id":"22c235c0282c88f2","type":"ui-page","name":"Help","ui":"0095684061591fec","path":"/help","icon":"mdi-chat-question","layout":"grid","theme":"44dd49330c02d4ba","order":10,"className":"","visible":"true","disabled":"false"},{"id":"0095684061591fec","type":"ui-base","name":"Enqode","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-control","ui-notification"],"showPathInSidebar":false,"navigationStyle":"icon"},{"id":"44dd49330c02d4ba","type":"ui-theme","name":"LightCyber","colors":{"surface":"#071438","primary":"#7300b5","bgPage":"#ebeef3","groupBg":"#ffffff","groupOutline":"#e6e6e6"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

Thanks in advance for your help!

[arturv2000]

Hi

Your template code has some errors...

Even so, there is an error when loading the external script, there is an issue on GitHub for that library

Error using with CDN · Issue #27 · greghub/vue-funnel-graph-js (github.com)

Considering that the last commit is more than 5 years ago, it could not be compatible with Vue3 and most likely some dependency is missing.

If you want to try, this is what I am using, similar to what I have to load ChartJs but removed the extra pieces...

You can see the error on the browser console window.

[{"id":"5b58efcc9731e50a","type":"ui-template","z":"76fa92b1d3123479","group":"5a24a7294e508359","page":"","ui":"","name":"Funnel Chart","order":2,"width":0,"height":0,"head":"","format":"<template>\n  <div id=\"funnel-graph\"></div>\n</template>\n\n\n<script src=\"https://unpkg.com/vue-funnel-graph-js/dist/vue-funnel-graph.min.js\"></script>\n\n<script>\n    export default {\n\n  data() {\n    this.mychart = null;\n    return {\n      \n    }\n  },\n  watch: {\n    msg: function () {\n    },\n  },\n  computed: {\n  },\n  methods: {\n    init: function () {\n      this.mychart = new window.VueFunnelGraph({\n          container: '.funnel-graph',\n          gradientDirection: 'horizontal',\n          data: {\n              labels: ['Impressions', 'Add To Cart', 'Buy'],\n              colors: ['orange', 'red'],\n              values: [12000, 5700, 360]\n          },\n          displayPercent: true,\n          direction: 'horizontal'\n      });\n  \n      this.mychart.draw();\n      console.log(this.mychart);\n\n      return (true);\n    },\n  },\n  mounted() {\n    // code here when the component is first loaded\n    let interval = setInterval(() => {\n      console.log('Attempting to Start');\n      if (window.VueFunnelGraph !== undefined) {\n        console.log('Going to start Chart');\n        if (this.init() == true) {\n          console.log('Chart downloaded and started');\n          clearInterval(interval);\n        } else {\n          console.log('Error Init Chart');\n        }\n      }\n    }, 250);\n  },\n  unmounted() {\n    // code here when the component is removed from the Dashboard\n    // i.e. when the user navigates away from the page\n  }\n}\n</script>\n\n<style>\n  /* Define any styles here - supports raw CSS */\n  #funnel-graph {\n    width: 100%;\n    height: 400px;\n  }\n</style>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":1170,"y":440,"wires":[[]]},{"id":"5a24a7294e508359","type":"ui-group","name":"Support","page":"22c235c0282c88f2","width":"12","height":"1","order":1,"showTitle":false,"className":"","visible":"true","disabled":"false"},{"id":"22c235c0282c88f2","type":"ui-page","name":"Help","ui":"f10950b00cebceb1","path":"/help","icon":"mdi-chat-question","layout":"grid","theme":"44dd49330c02d4ba","order":10,"className":"","visible":"true","disabled":"false"},{"id":"f10950b00cebceb1","type":"ui-base","name":"UI Name","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"navigationStyle":"default","titleBarStyle":"default"},{"id":"44dd49330c02d4ba","type":"ui-theme","name":"LightCyber","colors":{"surface":"#071438","primary":"#7300b5","bgPage":"#ebeef3","groupBg":"#ffffff","groupOutline":"#e6e6e6"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

[guillad]

Thanks arturv2000! I appreciate your detailed response and insights;)
Despite trying various approaches, including D3 and checking for missing dependencies,
I hit a dead end with this library.
As a workaround, I created an HTML endpoint and served it as an iframe...