Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

223
Views
View plotly graph on localhost NodeJS

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.

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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.

  1. You have to import plotly.js from a content delivery network (CDNJS). Or install it.

  2. You have to create a div tag and create any id (for demonstrative reasons I used ExampleId you dont have to).

  3. You need to go the the plotly.js docs and click on what graph you want.

  4. Copy and paste the js code and edit the values you want to change.

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

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!