# Plot and button on uibuilder

**URL:** <https://discourse.nodered.org/t/plot-and-button-on-uibuilder/31581>\
**Category:** General\
**Created:** [15 August 2020 04:36 UTC](https://discourse.nodered.org/t/plot-and-button-on-uibuilder/31581 "2020-08-15T04:36:26Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![lalo](https://avatars.discourse-cdn.com/v4/letter/l/f4b2a3/32.png) [@lalo](https://discourse.nodered.org/u/lalo)\
**Post date:** [15 August 2020 04:36 UTC](https://discourse.nodered.org/t/plot-and-button-on-uibuilder/31581/1 "2020-08-15T04:36:26Z")

</div>

Hi guys I'm trying to create a table and some buttons in the uibuilder, so basically I have some values comming from mqtt node and a button to send on in the ui, This is my flow.

```auto
[{"id":"8308324c.987ff","type":"uibuilder","z":"600a74c8.3d1c8c","name":"","topic":"","url":"uibuilder","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"showfolder":false,"x":390,"y":180,"wires":[["442af1d7.20e65"],[]]},{"id":"442af1d7.20e65","type":"debug","z":"600a74c8.3d1c8c","name":"msg from button","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":650,"y":180,"wires":[]},{"id":"72b0ed41.17e344","type":"inject","z":"600a74c8.3d1c8c","name":"data to plot","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"5","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"$random()","payloadType":"jsonata","x":170,"y":180,"wires":[["8308324c.987ff"]]}]

```

---

<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:** [15 August 2020 07:04 UTC](https://discourse.nodered.org/t/plot-and-button-on-uibuilder/31581/2 "2020-08-15T07:04:36Z")

</div>

And?

What is your issue/question?

Bootstrap-vue has 2 table components built in. The default template has a button example already coded on it.

---

<div class="post-metadata">

**Author:** ![lalo](https://avatars.discourse-cdn.com/v4/letter/l/f4b2a3/32.png) [@lalo](https://discourse.nodered.org/u/lalo)\
**Post date:** [15 August 2020 16:36 UTC](https://discourse.nodered.org/t/plot-and-button-on-uibuilder/31581/3 "2020-08-15T16:36:22Z")

</div>

my issue is how can I set the input to plot in the graph and how can I do to send the button on my flow to the debbug node.

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [15 August 2020 18:21 UTC](https://discourse.nodered.org/t/plot-and-button-on-uibuilder/31581/4 "2020-08-15T18:21:09Z")

</div>

Hello lalo,

did you manage to get the basic example flow working using uibuilder?  
you should start with that before figuring out how to present your data to a chart or a table.

uibuilder is like a bridge between node-red server and a frontend website .. it helps you extend the basic ui\_dashboard components and use the full power of html, javascript and additional libraries to build your own custom dashboard

there is some good documentation [here](https://github.com/TotallyInformation/node-red-contrib-uibuilder#3-features) that explains the features  
and also you can watch this [video on youtube](https://www.youtube.com/watch?v=NIeJ_VTI3i8) that demostrates the use of uibuilder

---

<div class="post-metadata">

**Author:** ![lalo](https://avatars.discourse-cdn.com/v4/letter/l/f4b2a3/32.png) [@lalo](https://discourse.nodered.org/u/lalo)\
**Post date:** [16 August 2020 02:23 UTC](https://discourse.nodered.org/t/plot-and-button-on-uibuilder/31581/5 "2020-08-16T02:23:54Z")

</div>

Thanks I will check it.

---

<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:** [16 August 2020 19:42 UTC](https://discourse.nodered.org/t/plot-and-button-on-uibuilder/31581/6 "2020-08-16T19:42:53Z")

</div>

Please use the default template and the other examples that come with the uibuilder node to get a feel for how things work.

You will find examples for various charting libraries on the uibuilder WIKI on GitHub.

---

<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:** [15 October 2020 19:42 UTC](https://discourse.nodered.org/t/plot-and-button-on-uibuilder/31581/7 "2020-10-15T19:42:59Z")

</div>

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