# Inserting Plotly charts into Dashboard

**URL:** <https://discourse.nodered.org/t/inserting-plotly-charts-into-dashboard/29641>\
**Category:** Dashboard\
**Created:** [7 July 2020 08:34 UTC](https://discourse.nodered.org/t/inserting-plotly-charts-into-dashboard/29641 "2020-07-07T08:34:46Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![e-Duardo](https://avatars.discourse-cdn.com/v4/letter/e/96bed5/32.png) [@e-Duardo](https://discourse.nodered.org/u/e-Duardo)\
**Post date:** [7 July 2020 08:34 UTC](https://discourse.nodered.org/t/inserting-plotly-charts-into-dashboard/29641/1 "2020-07-07T08:34:46Z")

</div>

Hi,  
I want to represent pairs of values in a polar chart (one of the values is the module or radius and the other one is the phase or angle).  
I was suggested to use the Plotly charts. And before making my own chart, I am trying to reproduce some basic examples in which static values should be displayed.  
Note that I do not have experience with HTML...

I don't see any result in the dashboard (I only see an empty box where the chart should be placed). So I need some help...

I copy the HTML code (with the JS script in it) in the Dashboard template node (which is assigned to a group into a Tab of the Dashboard). The code includes de values to be displayed, so I do not inject anything. But this does not display any result.

In a post of the forum, somone was using the moustache template (not the dashboard template but the core node). So I tried to paste the code into the moustache template, and inject it to the dashboard template.

I tried two ways, one is using the same link as the source

```auto
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script

```

and also I opened this js file and stored it into a folder, using the path as the source:

```auto
<script src="C:\Users\Ingenieria - Edu\.node-red\js_files\plotly-latest.min.js"></script>

```

So, what I copied in the Dashboard template node is:

```auto
<head>
  <!-- Plotly.js -->
  <script src="C:/Users/Ingenieria - Edu/.node-red/js_files/plotly-latest.min.js"></script>
</head>

<body>

  <div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>
  <script>

var trace1 = {
  x:[1,2,3],//[{{payload.Temperature}}],
  y:[1,2,3],//[{{payload.Temperature}}],
  //mode: 'lines',
  connectgaps: true
};

var data = [trace1];

var layout = {
  title: 'Connect the Gaps Between Data',
  showlegend: true
};

Plotly.newPlot('myDiv', data, layout, {showSendToCloud: true});

</script>
</body>

```

So... what am I doing bad? (as I said, I do not have experience with html, and only have the very basic knolwledge of javascript that one can get in an introductory online course)

Thanks

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [10 July 2020 02:17 UTC](https://discourse.nodered.org/t/inserting-plotly-charts-into-dashboard/29641/2 "2020-07-10T02:17:30Z")

</div>

I would guess that you are facing some issue to load the plotly library.

I tested your flow and it worked right first time. I am invoking the library from Node-Red static folder. You have to be careful when coding the path to load the library.

The static folder in my Node-RED installation is: C:\Users\OCM\.node-red\static

I created a directory in the static folder, like below:

C:\Users\OCM\.node-red\static\plotly

My personal preference is adding a separate ui\_template node just to load the library (below config).

![a-01](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/1/91148fab47989140ab43180f367a01103674a7f8.png)

 ![a-02](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/a/4a793140b74e73cc36a50ab62618ade6965168e3.png)

---

<div class="post-metadata">

**Author:** ![e-Duardo](https://avatars.discourse-cdn.com/v4/letter/e/96bed5/32.png) [@e-Duardo](https://discourse.nodered.org/u/e-Duardo)\
**Post date:** [16 July 2020 13:28 UTC](https://discourse.nodered.org/t/inserting-plotly-charts-into-dashboard/29641/3 "2020-07-16T13:28:03Z")

</div>

Thanks for your reply,

I don't have any static folder into the '.node-red' folder. So I created that folder and copied the same path in the code as you did. But I guess that it is not that easy, because it doesn't show anything yet. Is there any configuration change expected?

I also think that I am not putting the codes into the appropriate nodes...

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [16 July 2020 13:51 UTC](https://discourse.nodered.org/t/inserting-plotly-charts-into-dashboard/29641/4 "2020-07-16T13:51:40Z")

</div>

> [@e-Duardo](#):
>
> I don't have any static folder into the '.node-red' folder.

You have to add the static folder in the `settings.js` file. See below how I configured it in a Raspberry Pi (not the same computer from my previous post).

```auto
    // When httpAdminRoot is used to move the UI to a different root path, the
    // following property can be used to identify a directory of static content
    // that should be served at http://localhost:1880/.
    //httpStatic: '/home/nol/node-red-static/',
	
	httpStatic: '/home/pi/.node-red/static/',

```

You have to restart Node-Red after changing the settings file.

On the startup log you will see the HTTP static folder.

 ![a-01](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/c/9c28012e44651098eec9fd7b05da37e38e00d37b.png)

---

<div class="post-metadata">

**Author:** ![e-Duardo](https://avatars.discourse-cdn.com/v4/letter/e/96bed5/32.png) [@e-Duardo](https://discourse.nodered.org/u/e-Duardo)\
**Post date:** [20 July 2020 07:41 UTC](https://discourse.nodered.org/t/inserting-plotly-charts-into-dashboard/29641/5 "2020-07-20T07:41:12Z")

</div>

Thanks so much!

it finally works!  
I just activated the static folder as mentioned in the settings file and now I can use the plotly charts.

After reproducing the examples, my next step is to display dynamic data from flows...

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [20 July 2020 08:39 UTC](https://discourse.nodered.org/t/inserting-plotly-charts-into-dashboard/29641/6 "2020-07-20T08:39:56Z")

</div>

> [@e-Duardo](#):
>
> my next step is to display dynamic data from flows...

You may find something in this thread useful - [Plotly, data formats](https://discourse.nodered.org/t/plotly-data-formats/30063)

---

<div class="post-metadata">

**Author:** ![e-Duardo](https://avatars.discourse-cdn.com/v4/letter/e/96bed5/32.png) [@e-Duardo](https://discourse.nodered.org/u/e-Duardo)\
**Post date:** [20 July 2020 09:27 UTC](https://discourse.nodered.org/t/inserting-plotly-charts-into-dashboard/29641/7 "2020-07-20T09:27:59Z")

</div>

Thanks! I am visiting that thread and it is indeed useful

---

<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:** [3 August 2020 09:28 UTC](https://discourse.nodered.org/t/inserting-plotly-charts-into-dashboard/29641/8 "2020-08-03T09:28:04Z")

</div>

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