how to use plotly.js in a node application

Question

I have a node application. I installed plotly with npm install plotly, then in my node app script I require it:

var plotly = require('plotly')`

However, I do not know how to get the document element Id, which normally on the client side is fine to get, and can be passed to Plotly.newPlot:

var gd = document.getElementById("myChart")
...
Plotly.newPlot(gd, traces, layout)

I have tried with jsdom but got no luck.

Or is it better practice to keep all the plotly stuff on the front-end and just call it as:

<script src="/js/myplots.js"></script>

instead of trying to integrate with node? My intention is to render charts on the front-end

A Node application runs without a browser, so there is no DOM, no document. What are you trying to achieve? Render charts in the backend? — Patrick Hund
– Patrick Hund, Commented Apr 9, 2018 at 15:59
@PatrickHund thanks, my intention is to render charts on the front-end only — tsando
– tsando, Commented Apr 9, 2018 at 16:02
Then you should use plotly in the client side code, not on the server side — Patrick Hund
– Patrick Hund, Commented Apr 9, 2018 at 16:03

Aravindh nivas.M · Accepted Answer · 2019-08-22 09:59:57Z

3

I know it is very late but if you still haven't figured it how. Here it is: Just use the ID name instead of query selecting it.

Plotly.newPlot("myChart", traces, layout)

answered Aug 22, 2019 at 9:59

Aravindh nivas.M

516 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

starbeamrainbowlabs Over a year ago

What is the ID here, since Node.js doesn't have a DOM? Can you elaborate at all?

Calum · Accepted Answer · 2018-04-26 09:19:31Z

Keep the plotly JS file on the front end and render there. Just use node to prep your data and send it over.

Personally I prep the entire data of Plotly.newPlot('myDiv', data); in node then get client to request for it, so I can control the looks of the plot server side.

Plotly for Node (https://plot.ly/nodejs/) allows you to connect to a plotly server and display your graph online via their API (this requires an account and API key with Plotly) The exception to this is that is you / your company has plotly on-premises server running.

Plotly JS is the actual library that allows you to plot on your own server.

Only reason to install the node version is to allow code completion inside node

Tim Van Laer · Accepted Answer · 2023-04-21 07:30:19Z

1

As an alternative to nw.js, you can also depend on jsdom as the basis for plotly without browser. There is an example of that here: https://github.com/striezel/plotly-node-export-server/blob/master/export-server/ssr.js

fs.promises.readFile("./plotly-2.20.0.min.js", "utf-8")
  .then(jsdomWindow.eval)
  .then(() =>
    jsdomWindow.Plotly.toImage(
      { data, layout, config },
      { format: "svg", imageDataOnly: true })
  );

This works like a charm, but using eval feels a bit dirty imho.

answered Apr 21, 2023 at 7:30

Tim Van Laer

2,57427 silver badges32 bronze badges

Comments

FarhadMohseni · Accepted Answer · 2022-01-16 02:54:01Z

0

According to plotly community,

The most solid option would be https://gist.github.com/etpinard/d27a44bd5dbee5490f20274 at the moment.

nw.js can be run headlessly on servers. See instructions here.

The above gist does not support PDF exports, but this should be easy to add using a third-party library e.g:

https://github.com/CBiX/svgToPdf.js

https://github.com/MrRio/jsPDF

or server-side e.g. using Ubuntu’s convert utility

answered Jan 16, 2022 at 2:54

FarhadMohseni

4247 silver badges9 bronze badges

1 Comment

starbeamrainbowlabs Over a year ago

The link to that gist is now a 404, which now renders your answer useless. next time, please copy and paste content from remote sources into your answer here to avoid link rot.

Collectives™ on Stack Overflow

how to use plotly.js in a node application

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related