How to use a JavaScript chart library like D3.js or Raphaël in server-side Java

Question

I would like to use D3.js (or maybe Raphaël) for backend-generated reports using XSL-FO with Java. These JavaScript libraries should be used for several reasons:

1. They render more beautiful charts than what I've seen from Java libraries (IMO)
2. They support both SVG and PNG (from what I know), which is needed in XSL-FO
3. They will also be used in frontend parts of the application. Reusing them also on the backend with Java would reduce developer learning curves and codebase footprint.

So using any similar Java libraries is a less favourable option.

Now the most straight-forward way to use D3.js with Java is to use a heavy tool like selenium in order to render a dummy HTML page and execute the JavaScript in it. But that seems like overkill to me.

Is there any simpler way to execute this kind of JavaScript directly in the same Java process? I'm asking because D3.js is designed to work in the context of an HTML document. I'm not sure if that would be possible to do with Rhino or other Java scripting implementations

Golanka

Hi Lukas, did you find any good solution to render D3 based charts in server-side Java? I have now exactly the same problem, any feedback or hint would be really appretiated by me. – Lagrange

Nope, I hadn't found any solution to this. But you can put a bounty on my question to attract more readers and possibly get an answer... – Golanka

Thanks for the feedback. I might be ok with phantomjs. We will see. – Lagrange

Did you try JavaFx webview? – Lagrange

@GáborLipták: Nope not yet – Golanka

See also #5678059 – Borsch

Answer 1

You could use phantom.js. It's a headless browser based on webkit, which allows you to run JavaScript without the need for a browser.

Using this you could just execute a system call to run phantom.js with for your JavaScript code and inputs. It would then create your output accordingly. See this example.

Damson

That looks nice (and crazy!). The polar clock example using Raphaël is encouraging. – Golanka

Hmm, when I had a second look, this is not a Java / Javascript library. I won't be able to install other types of programs on the system, unfortunately... – Golanka

I can confirm, that NVD3 chart export (d3 based) is possible with PhantomJS. You need developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… , since PhantomJS does not have "bind", and you need to wait with PhantomJS export till the graph is rendered. I simply set a variable in the window object using a transition callback (https://mcmap.net/q/204553/-invoke-a-callback-at-the-end-of-a-transition), and in PhantomJS I wait till the page.evaluate says that the window property is set. Works like it should. Take care of sizing of the SVG and the cliprect and viewportsize of phantomjs. – Lagrange

Answer 2

I worked on that about a year ago. I managed to have parts of HighCharts (SVG graphing in javascript) working with Rhino. I had to plugged env.js into it and ran into a lot of problems regarding canvas Element, especially around Bounding Boxes computations. Objects in Rhino doesn't implement getBBox(), which can't easily be faked.

My goal was to finally render it in PDF with Batik... It took too much time, and we decided to switch to another technology.

So, today, we're using wkhtmltopdf, which is not Java, but which is a static executable that can be embedded in a jar and launched easily from java side. By the way, xvfb is mandatory on Linux if you want to render something. That's pretty the same thing as PhantomJS

Sorcerer

Thanks for those hints. Yes if that much patching is necessary, then the whole thing is more of a hack than a solution... – Golanka

... note that with selenium (and its HtmlUnitDriver), a lot of patching seems to be equally necessary... – Golanka

HTMLUnit uses the Rhino engine.... So if you don't use the Firefox driver, you won't be able to do what you want easily – Sorcerer

I tried various combinations. The Firefox driver works, or the Firefox DesiredCapabilities with some serious patching seem to partially work, too, as HTMLUnit somehow extends the Rhino engine – Golanka

I didn't mention wkhtmltopdf has a wkhtmltoimage which would be smaller to use than a global selenium install. In fact, you'll have to ramp up a selenium grid if you want not to have the Firefox startup time crumbling your perfs. Qt engines like wkhtmltoimage or phantom.js are much more reactive than a continously stopped/started FF instance with Selenium – Sorcerer

Answer 3

You might want to have a look at these d3 wrappers:

• javafx-d3

https://github.com/stefaneidelloth/javafx-d3

• gwt-d3:

https://github.com/gwtd3/gwt-d3

• "Freecode Charts and D3 Wrapper":

https://vaadin.com/directory#!addon/freecode-charts-and-d3-wrapper

Ranger