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
