Render locally offline #35

piranna · 2015-12-10T13:21:35Z

Allow to render the charts by using the plotly.js module now that's free software.

alexander-daniel · 2015-12-10T14:10:03Z

Hello @piranna, thanks for the comment. Unfortunately, this is out of the scope of this module as this is simplly an node HTTP wrapper around our REST API. This module will not be extended to including features such as offline image-rendering.

If you still wish to do that, your best solution would be to load the plotly.js package into either node-webkit or electron. You can run both of these headlessly, and generate images from the DOM that way.

piranna · 2015-12-10T14:49:57Z

Thank you for your comment, I'm going to try to do it using PhantomJS, since gitbook-plugin-mermaid uses it already.

alexander-daniel · 2015-12-10T15:15:21Z

Great! I look forward to seeing your implementation! Cheers!

piranna · 2015-12-12T20:24:44Z

Great! I look forward to seeing your implementation! Cheers!

I have been trying to achieve this during the last two days without luck :-( Nor PhantomJS (based on WebKit) nor PhantoJS 2 (based on Chromium) nor JsDom could made it work, sometimes I get that the Plotly global is not defined and others about _layout is null. On the other hand, the same webpage that I'm using with them works correctly when using it directly by hand on the Firefox web browser... :-/

alexander-daniel · 2015-12-12T22:07:13Z

@piranna we've had success using node-webkit headlessly. I would try that! I would imagine electron would yield similar results!

Feel free to share the repository or gist or CodePen where you've tried out PhantomJS and I can poke around a bit.

piranna · 2015-12-13T12:06:21Z

I've done a new test on Firefox and got a SyntaxError: illegal character. I've look about it an seems you are using Unicode characters on the source code:

  var Îµ = 1e-6, Îµ2 = Îµ * Îµ, Ï€ = Math.PI, Ï„ = 2 * Ï€, Ï„Îµ = Ï„ - Îµ, halfÏ€ = Ï€ / 2, d3_radians = Ï€ / 180, d3_degrees = 180 / Ï€;

When using the minimified version this obviously doesn't happens.

You can get the code from https://github.com/piranna/gitbook-plugin-plotly, you'll need to have PhantomJS 2 (based on Chromium) installed globally. I got similar results with PhantomJS 1 (based on WebKit), but needs to be added some polyfills, maybe I'll try again with it later to make it easier to install if we got this to work with PhantomJS 2 (PhantomJS 2 don't have official binaries for Linux).

piranna · 2015-12-13T12:08:54Z

By the way, the uploaded code gave me the next error:

[piranna@Latitude:~/Proyectos/gitbook-plugin-plotly]
 (master) > npm test

> [email protected] test /home/piranna/Proyectos/gitbook-plugin-plotly
> ./test.js

phantom stdout: TypeError: undefined is not an object (evaluating 'r._paperdiv.style')


phantom stdout:   file:///home/piranna/Proyectos/gitbook-plugin-plotly/node_modules/plotly.js/dist/plotly.min.js:32 in S
  file:///home/piranna/Proyectos/gitbook-plugin-plotly/node_modules/plotly.js/dist/plotly.min.js:31 in syncOrAsync
  file:///home/piranna/Proyectos/gitbook-plugin-plotly/node_modules/plotly.js/dist/plotly.min.js:32 in C
  file:///home/piranna/Proyectos/gitbook-plugin-plotly/node_modules/plotly.js/dist/plotly.min.js:31 in syncOrAsync
  file:///home/piranna/Proyectos/gitbook-plugin-plotly/node_modules/plotly.js/dist/plotly.min.js:32 in plot
  file:///home/piranna/Proyectos/gitbook-plugin-plotly/converter.html:10 in renderToSvg
  phantomjs://webpage.evaluate():3
  phantomjs://webpage.evaluate():4

etpinard · 2015-12-13T18:27:02Z

@piranna this plotly/plotly.js#39 (comment) should help you.

piranna · 2015-12-13T18:32:17Z

@piranna this plotly/plotly.js#39 (comment) should help you.

Well, at least now I can be able to use the unminimified version :-) The error I get is

> [email protected] test /home/piranna/Proyectos/gitbook-plugin-plotly
> ./test.js

phantom stdout: TypeError: undefined is not an object (evaluating 'fullLayout._paperdiv
        .style')


phantom stdout:   file:///home/piranna/Proyectos/gitbook-plugin-plotly/node_modules/plotly.js/dist/plotly.js:62393 in lsInner
  file:///home/piranna/Proyectos/gitbook-plugin-plotly/node_modules/plotly.js/dist/plotly.js:57936 in syncOrAsync
  file:///home/piranna/Proyectos/gitbook-plugin-plotly/node_modules/plotly.js/dist/plotly.js:62381 in layoutStyles
  file:///home/piranna/Proyectos/gitbook-plugin-plotly/node_modules/plotly.js/dist/plotly.js:57936 in syncOrAsync
  file:///home/piranna/Proyectos/gitbook-plugin-plotly/node_modules/plotly.js/dist/plotly.js:59873 in plot
  file:///home/piranna/Proyectos/gitbook-plugin-plotly/converter.html:10 in renderToSvg
  phantomjs://webpage.evaluate():3
  phantomjs://webpage.evaluate():4

fullLayout is the same as gd._fullLayout, and it's content is null, but it works on Firefox. What could be happening? :-/

piranna · 2015-12-28T20:04:47Z

@alexander-daniel, did you were able to take a look to PhantomJS? If you fetch my plugin project, just by executing npm test is enough to check it, if it works it should return the HTML code with the DIV and SVG tags just ready to be inserted on the webpage.

alexander-daniel · 2016-01-04T14:37:22Z

@piranna

Cloned the repo, ran npm i, also installed PhantomJS2 globally with npm.
Got the following output after running npm test

~/plotly/gitbook-plugin-plotly (master) ♛  npm test

> [email protected] test /Users/alex/plotly/gitbook-plugin-plotly
> ./test.js

phantom stdout: TypeError: undefined is not an object (evaluating 'r._paperdiv.style')


phantom stdout:   file:///Users/alex/plotly/gitbook-plugin-plotly/node_modules/plotly.js/dist/plotly.min.js:31 in C
  file:///Users/alex/plotly/gitbook-plugin-plotly/node_modules/plotly.js/dist/plotly.min.js:30 in syncOrAsync
  file:///Users/alex/plotly/gitbook-plugin-plotly/node_modules/plotly.js/dist/plotly.min.js:31 in S
  file:///Users/alex/plotly/gitbook-plugin-plotly/node_modules/plotly.js/dist/plotly.min.js:30 in syncOrAsync
  file:///Users/alex/plotly/gitbook-plugin-plotly/node_modules/plotly.js/dist/plotly.min.js:32 in plot
  file:///Users/alex/plotly/gitbook-plugin-plotly/converter.html:10 in renderToSvg
  phantomjs://webpage.evaluate():3
  phantomjs://webpage.evaluate():4

piranna · 2016-01-04T14:46:06Z

Yes, that's the same error I was getting before, r is fullLayout on the unminified version. What could be happening here?

alexander-daniel · 2016-01-04T14:58:05Z

@piranna Not too sure. Unfortunately this out still out of the scope of this module.

Again, I can only vouch for node-webkit and electron. Perhaps try using one of those? They are becoming much more mature projects!

I cannot debug too much on this, but if you tag me in an issue on your own Repo, we can try troubleshooting there.

Cheers!

piranna · 2016-01-04T15:03:25Z

Again, I can only vouch for node-webkit and electron. Perhaps try using one of those? They are becoming much more mature projects!

AFAIK they are more focused on building desktop application instead of working headless, so I'm not sure how much useful they would be, and also don't know how bloated they are... That's why I tried to use jsDom too, to try to have runtime dependencies as low as possible and the install fully automated by npm.

I cannot debug too much on this, but if you tag me in an issue on your own Repo, we can try troubleshooting there.

Ok, I'll do.

0xMachan · 2016-09-12T14:49:37Z

@piranna any update on this. I am also trying to render the plotly.js charts with Phantom JS and keep running into different errors depending on the version. So far I have had this consistent error on phantom-prebuilt 2.1.14 NotSupportedError: DOM Exception 9: The implementation did not support the requested type of object or operation. - plotly.js:96714.

@alexander-daniel why is there no support for headless browsers? This really creates a limitation for people wanting to render charts as part of a PDF/Image solution right?

Alternative solutions:

No go for plotly-nodejs as it doesn't support offline mode
Using Python offline image rendering then passing back to NodeJS could work but is far from ideal as you require the python infra for very little value

etpinard · 2016-09-12T15:00:59Z

@leifdejong I'd recommend taking a look at http://community.plot.ly/t/how-to-perform-server-side-manipulation-using-plotly-js/1077/3 for the latest info.

alexander-daniel closed this as completed Dec 10, 2015

piranna mentioned this issue Jan 4, 2016

Problems with rendering offline piranna/gitbook-plugin-plotly#1

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Render locally offline #35

Render locally offline #35

piranna commented Dec 10, 2015

alexander-daniel commented Dec 10, 2015

Uh oh!

piranna commented Dec 10, 2015

Uh oh!

alexander-daniel commented Dec 10, 2015

Uh oh!

piranna commented Dec 12, 2015

Uh oh!

alexander-daniel commented Dec 12, 2015

Uh oh!

piranna commented Dec 13, 2015

Uh oh!

piranna commented Dec 13, 2015

Uh oh!

etpinard commented Dec 13, 2015

Uh oh!

piranna commented Dec 13, 2015

Uh oh!

piranna commented Dec 28, 2015

Uh oh!

alexander-daniel commented Jan 4, 2016

Uh oh!

piranna commented Jan 4, 2016

Uh oh!

alexander-daniel commented Jan 4, 2016

Uh oh!

piranna commented Jan 4, 2016

Uh oh!

0xMachan commented Sep 12, 2016

Uh oh!

etpinard commented Sep 12, 2016

Uh oh!

Render locally offline #35

Render locally offline #35

Comments

piranna commented Dec 10, 2015

alexander-daniel commented Dec 10, 2015

Uh oh!

piranna commented Dec 10, 2015

Uh oh!

alexander-daniel commented Dec 10, 2015

Uh oh!

piranna commented Dec 12, 2015

Uh oh!

alexander-daniel commented Dec 12, 2015

Uh oh!

piranna commented Dec 13, 2015

Uh oh!

piranna commented Dec 13, 2015

Uh oh!

etpinard commented Dec 13, 2015

Uh oh!

piranna commented Dec 13, 2015

Uh oh!

piranna commented Dec 28, 2015

Uh oh!

alexander-daniel commented Jan 4, 2016

Uh oh!

piranna commented Jan 4, 2016

Uh oh!

alexander-daniel commented Jan 4, 2016

Uh oh!

piranna commented Jan 4, 2016

Uh oh!

0xMachan commented Sep 12, 2016

Uh oh!

etpinard commented Sep 12, 2016

Uh oh!