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