Inserting Plotly charts into Dashboard

Dashboard
1

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

<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:

<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:

<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

2

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

a-02
a-02702Ă—459 9.05 KB

2 Likes
3

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...

4

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).

    // 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
a-011035Ă—292 12.5 KB

5

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...

6

You may find something in this thread useful - Plotly, data formats

7

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

8

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