Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

224
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda