# Funnel Chart in Dashboard 2

**URL:** <https://discourse.nodered.org/t/funnel-chart-in-dashboard-2/88993>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [26 June 2024 20:02 UTC](https://discourse.nodered.org/t/funnel-chart-in-dashboard-2/88993 "2024-06-26T20:02:59Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![guillad](https://avatars.discourse-cdn.com/v4/letter/g/bbe5ce/32.png) [@guillad](https://discourse.nodered.org/u/guillad)\
**Post date:** [26 June 2024 20:02 UTC](https://discourse.nodered.org/t/funnel-chart-in-dashboard-2/88993/1 "2024-06-26T20:02:59Z")

</div>

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](https://github.com/greghub/vue-funnel-graph-js) - Funnel graph drawing library for Vue.js.
2. [D3 Clone of FunnelGraph.js](https://observablehq.com/@leonelgalan/funnel-chart) - a D3.js implementation of a funnel chart.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/4/7417d29af574501d8367941f3eafe6d2bf07ff12.jpeg)

Here's my broken flow, based on the [Echarts](https://discourse.nodered.org/t/how-to-configure-echarts-in-dashboard-2/87259/4) demo solution:

```auto
[{"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!

---

<div class="post-metadata">

**Author:** ![arturv2000](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/arturv2000/32/88724_2.png) [@arturv2000](https://discourse.nodered.org/u/arturv2000)\
**Post date:** [26 June 2024 21:02 UTC](https://discourse.nodered.org/t/funnel-chart-in-dashboard-2/88993/2 "2024-06-26T21:02:52Z")

</div>

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)](https://github.com/greghub/vue-funnel-graph-js/issues/27)

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.

```auto
[{"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"}}]

```

---

<div class="post-metadata">

**Author:** ![guillad](https://avatars.discourse-cdn.com/v4/letter/g/bbe5ce/32.png) [@guillad](https://discourse.nodered.org/u/guillad)\
**Post date:** [27 June 2024 17:42 UTC](https://discourse.nodered.org/t/funnel-chart-in-dashboard-2/88993/3 "2024-06-27T17:42:06Z")

</div>

Thanks [arturv2000](https://discourse.nodered.org/u/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...

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [11 July 2024 17:42 UTC](https://discourse.nodered.org/t/funnel-chart-in-dashboard-2/88993/4 "2024-07-11T17:42:57Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.