# Extend Visualizations and Chart tools in Node-RED Dashaboard \[Vega-lite or Graphana?\]\]

**URL:** <https://discourse.nodered.org/t/extend-visualizations-and-chart-tools-in-node-red-dashaboard-vega-lite-or-graphana/22048>\
**Category:** Dashboard\
**Created:** [21 February 2020 06:51 UTC](https://discourse.nodered.org/t/extend-visualizations-and-chart-tools-in-node-red-dashaboard-vega-lite-or-graphana/22048 "2020-02-21T06:51:34Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![vongomben](https://avatars.discourse-cdn.com/v4/letter/v/a4c791/32.png) [@vongomben](https://discourse.nodered.org/u/vongomben)\
**Post date:** [21 February 2020 06:51 UTC](https://discourse.nodered.org/t/extend-visualizations-and-chart-tools-in-node-red-dashaboard-vega-lite-or-graphana/22048/1 "2020-02-21T06:51:34Z")

</div>

Hi.  
I have a question regarding easy ways to visualize complex datasets  
.  
My needs are:

- **interactive ways to see the data** (hovering mouse to see values, changing the zoom of the axis, have multiple variables and datasets on the same axis)
- **alerts based on the behaviour of such data** , based on client defined / dashboard driven data input

We have already installed grafana and embedded it in one of the dashabord pages (the installation is getting huge), but while I need to save / retrieve the data from the database, I dislike a bit the need to host such a thing, which is underused for our needs, and obliges the client for a double authentication. Moreover, is one more thing to look after.

I've seen with great interest Vega Lite.

What I'd need is something really close to this wonderful [Overview and Detail](https://vega.github.io/editor/#/examples/vega-lite/interactive_overview_detail) example chart.  
I am feeling a little bit lost in the need to show the data. How to I get the _bottom data viewer_ data within Node-RED?

Are there any good tutorials or resources online in Vega Lite in Node-RED?  
Vega site has good documentation, yet I feel a little bit lost in this

Any advice appreciated.

---

<div class="post-metadata">

**Author:** ![kuema](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kuema/32/6542_2.png) [@kuema](https://discourse.nodered.org/u/kuema)\
**Post date:** [21 February 2020 06:57 UTC](https://discourse.nodered.org/t/extend-visualizations-and-chart-tools-in-node-red-dashaboard-vega-lite-or-graphana/22048/2 "2020-02-21T06:57:11Z")

</div>

You can always use the Dashboard's `template` node and integrate the visualization lib of your choosing.

And I just found this:

> **[node-red-node-ui-vega](https://flows.nodered.org/node/node-red-node-ui-vega)**
>
> Node-RED UI widget node for Vega visualization grammar

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [21 February 2020 10:10 UTC](https://discourse.nodered.org/t/extend-visualizations-and-chart-tools-in-node-red-dashaboard-vega-lite-or-graphana/22048/3 "2020-02-21T10:10:57Z")

</div>

Most of the examples from the vega site should cut/paste into the node ok.  
As vega data can be very "rich" in format, manipulating your own data into that format will depend where your data is coming from and your level of javascript skill.

---

<div class="post-metadata">

**Author:** ![Cristiano](https://avatars.discourse-cdn.com/v4/letter/c/b5e925/32.png) [@Cristiano](https://discourse.nodered.org/u/Cristiano)\
**Post date:** [21 February 2020 19:47 UTC](https://discourse.nodered.org/t/extend-visualizations-and-chart-tools-in-node-red-dashaboard-vega-lite-or-graphana/22048/4 "2020-02-21T19:47:32Z")

</div>

hello

what data base you are using?

---

<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:** [22 March 2020 19:47 UTC](https://discourse.nodered.org/t/extend-visualizations-and-chart-tools-in-node-red-dashaboard-vega-lite-or-graphana/22048/5 "2020-03-22T19:47:49Z")

</div>

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