View plotly graph on localhost NodeJS

Question

Is there any way to generate a plotly graph in NodeJS and view it on a localhost instead of in HTML? If there is, how? And if there isn't, then what other ways can I create graphs and view them in NodeJS?

UPDATE: I thought of a workaround, which creates a server, using the http node module, and then in the HTML code displayed on the server, we load up plotly through <script> and do the rest of the JS processing in there. However, I still would like a way of doing this that doesn't take up so many lines of code.

What do you mean by view it on a localhost instead of in HTML ? What did you try instead ? — EricLavault
– EricLavault, Commented Jan 9, 2022 at 17:51
Do you mean embed a graph in html to display in localhost, but in your html code it will be a div or some tag? — Varun W.
– Varun W., Commented Jan 12, 2022 at 15:42
I want to use Plotly in NodeJS, and then view the graph generated on a server, such as a localhost. — Quantalabs
– Quantalabs, Commented Jan 17, 2022 at 21:12
I dont mean to be rude but do you have a reason you want it to be in nodejs? I mean it is simpler and more efficient in javascript because you can edit the code in your javascript file which will change only the client side code and not your server. Also it is easier and faster because in nodejs you need an api key. Also when you use a cdn you save space in your server because is loads on the client's device and you can chose what version you want instead on installing and uninstalling the versions in nodejs. — Varun W.
– Varun W., Commented Jan 18, 2022 at 16:56

Varun W. · Accepted Answer · 2022-02-02 03:10:25Z

Plotly for nodejs does not naturally support this feature. To learn more please check out this article. You can create a node.js graph and you can embed it using html independently.

One work around I found is:

Advantages:

Always up as long as your device is running.

Disadvantages:

You need an API key.
You need a Plotly account.
You have to get the URL from your polity account. Node.js You
have to get the URL from your plotly account.

Node.js

require('plotly')(username, api_key);

var data = [
  {
    x: ["giraffes", "orangutans", "monkeys"],
    y: [20, 14, 23],
    type: "bar"
  }
];
var graphOptions = {filename: "basic-bar", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});

HTML

<iframe scr="ploty_embed_URL_which_you_find_in_your_plotly_account"></iframe>

You can also use plotly.js in HTML.

You have to import plotly.js from a content delivery network (CDNJS). Or install it.
You have to create a div tag and create any id (for demonstrative reasons I used ExampleId you dont have to).
You need to go the the plotly.js docs and click on what graph you want.
Copy and paste the js code and edit the values you want to change.
Run your code!

Advantages:

You dont need an account.
Less space on you server.
Works on the client side so if wont harm your server.
Chose what version you want to run.
All of it goes I your javascript file so you dont have to worry about it being different for everyone. (Everyone on the website will see the same thing.)

Disadvantages:

The website wont show up if cdnjs is down (It is rarely down but it is still a disadvantage.

Note: You dont have to copy the code from the docs if you know what you are doing I put copy and paste for demonstrative purposes.

var trace1 = {
  x: [1, 2, 3, 4],
  y: [10, 15, 13, 17],
  type: 'scatter'
};

var trace2 = {
  x: [1, 2, 3, 4],
  y: [16, 5, 11, 9],
  type: 'scatter'
};

var data = [trace1, trace2];

Plotly.newPlot('ExampleId', data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/2.8.3/plotly.min.js" integrity="sha512-dbAdoS/SyA/goUjoDL3nnizsyAkASCBwOmwVc8PbX287LjLnVSKmwbs0L49Z6lBTZu6UyCR/H3baviq/aO1dcg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<h1>Example of a Line Graph using Plotly.js</h1>

<div id="ExampleId"></div>

For more information visit the Plotly.js Documentation

Collectives™ on Stack Overflow

View plotly graph on localhost NodeJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related