# How to create diagram/sinoptic similar to PowerBI using node-red

**URL:** <https://discourse.nodered.org/t/how-to-create-diagram-sinoptic-similar-to-powerbi-using-node-red/76515>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [13 March 2023 14:43 UTC](https://discourse.nodered.org/t/how-to-create-diagram-sinoptic-similar-to-powerbi-using-node-red/76515 "2023-03-13T14:43:25Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Willianvcn](https://avatars.discourse-cdn.com/v4/letter/w/ebca7d/32.png) [@Willianvcn](https://discourse.nodered.org/u/Willianvcn)\
**Post date:** [13 March 2023 14:43 UTC](https://discourse.nodered.org/t/how-to-create-diagram-sinoptic-similar-to-powerbi-using-node-red/76515/1 "2023-03-13T14:43:25Z")

</div>

Hello everyone

I need to understand if it's possible, and then how, to create something similar with this:

[https://youtu.be/I-BI-xlM7TU](https://youtu.be/I-BI-xlM7TU)

using node-red. I already did some research and didn't find anything similar.

Appreciate all the help.

Thanks!

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [13 March 2023 21:46 UTC](https://discourse.nodered.org/t/how-to-create-diagram-sinoptic-similar-to-powerbi-using-node-red/76515/2 "2023-03-13T21:46:56Z")

</div>

I believe that I responded to something very similar recently. There is no pre-built way to do that with Node-RED right now. However, you might be able to do it with a Grafana dashboard - with no small effort.

---

<div class="post-metadata">

**Author:** ![Willianvcn](https://avatars.discourse-cdn.com/v4/letter/w/ebca7d/32.png) [@Willianvcn](https://discourse.nodered.org/u/Willianvcn)\
**Post date:** [14 March 2023 12:18 UTC](https://discourse.nodered.org/t/how-to-create-diagram-sinoptic-similar-to-powerbi-using-node-red/76515/3 "2023-03-14T12:18:22Z")

</div>

I've done a lot of research, but haven't found any diagram-like examples that are clickable.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [14 March 2023 16:06 UTC](https://discourse.nodered.org/t/how-to-create-diagram-sinoptic-similar-to-powerbi-using-node-red/76515/4 "2023-03-14T16:06:50Z")

</div>

Microsoft have $$ millions to spend so open source projects will not be able to compete in the same way.

It is certainly possible to hand-craft things though. If you've the time and energy.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [14 March 2023 16:37 UTC](https://discourse.nodered.org/t/how-to-create-diagram-sinoptic-similar-to-powerbi-using-node-red/76515/5 "2023-03-14T16:37:06Z")

</div>

As there isn't any ready made widget for dashboard, it takes to use `ui_template` and create it even from scratch or with the help of some library. Known that [GoJS](https://gojs.net/latest/index.html) is very powerful on such stuff but having tried it, must admit that it is overkill for such stuff and it takes quite of learning curve to get things as you wanted. If I ever needed such thing, I'd go on DIY route. STill, it is ab advanced level stuff to make.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [14 March 2023 17:46 UTC](https://discourse.nodered.org/t/how-to-create-diagram-sinoptic-similar-to-powerbi-using-node-red/76515/6 "2023-03-14T17:46:20Z")

</div>

> [@hotNipi](#):
>
> STill, it is ab advanced level stuff to make.

You can create such things with any of the dashboards of course. I've been messing with vanilla SVG recently but also with D3.JS.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/a/6adc032981454c97ad280eff213d6b818e02b8f9.png)

Which has some interactivity between the legend and the radar display.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [14 March 2023 18:06 UTC](https://discourse.nodered.org/t/how-to-create-diagram-sinoptic-similar-to-powerbi-using-node-red/76515/7 "2023-03-14T18:06:47Z")

</div>

Well known fact that I'm raw stuff lover so no libraries for me but sometimes I need to dig into some and that only makes my love to raw metal stronger.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [14 March 2023 18:16 UTC](https://discourse.nodered.org/t/how-to-create-diagram-sinoptic-similar-to-powerbi-using-node-red/76515/8 "2023-03-14T18:16:05Z")

</div>

Maybe I'll win you over to one particular gorgeous library one day. 🤣

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [14 March 2023 18:29 UTC](https://discourse.nodered.org/t/how-to-create-diagram-sinoptic-similar-to-powerbi-using-node-red/76515/9 "2023-03-14T18:29:10Z")

</div>

If there's a race I'll definitely miss the starting signal.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [14 March 2023 19:07 UTC](https://discourse.nodered.org/t/how-to-create-diagram-sinoptic-similar-to-powerbi-using-node-red/76515/10 "2023-03-14T19:07:50Z")

</div>

🙂

Do keep watching though because the next release of uibuilder will let you use it to create HTML that you can use without then needing a library to run it 🧙 Might be of interest when you want to run up a quick form or display a big table.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [14 March 2023 19:10 UTC](https://discourse.nodered.org/t/how-to-create-diagram-sinoptic-similar-to-powerbi-using-node-red/76515/11 "2023-03-14T19:10:22Z")

</div>

We did hijacked this topic for sure so let's take a break here anď mind the business.

---

<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:** [13 April 2023 19:11 UTC](https://discourse.nodered.org/t/how-to-create-diagram-sinoptic-similar-to-powerbi-using-node-red/76515/12 "2023-04-13T19:11:03Z")

</div>

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