How to use highcharts with princeXML?

Question

I value princexml, and so far it is very good. However, one small problem. Is there a way to save a graph created using highcharts in princexml, in a browser?

I understand that I need to create a graph as an image, on canvas, but not sure how to convey the princexml graph. Any ideas?

Answer 1

I work in DocRaptor (HTML for PDF API, using XML print for PDF rendering), and we just posted a blog post about adding Highcharts to PDF files:

Adding Highcharts to PDF Files

Basically, you just need to use our JavaScript engine (which is different from the JavaScript engine for JavaScript and runs before we pass the process to Prince) and disable the animation in the code that displays your graphics.

Answer 2

One thing you can do is simply pass on the SVG created by HighCharts to the prince.

One of the problems you will encounter with this solution is that IE8 will not generate SVG, but VML that the prince cannot display. You can submit your javascript directly to Prince, but we have yet to verify this solution.

Edit:

I actually just tested feed the prince javascript that will generate SVG ... but no luck, so we are stuck in feeding it with a pre-rendered SVG. You may need to do this on the server side using javascript runtime.

Answer 3

The PrinceXML JavaScript engine does not seem powerful enough to make diagrams with components such as Highcharts.

So what I did, run my page in PhantomJS so that it starts JS and creates SVG elements in the DOM and then feed the result to PrinceXML.

Be sure to turn off the animation, otherwise you will print frame 0 from it:

Highcharts.setOptions({ plotOptions: { series: { animation: false //Animations prevent proper PDF generation of charts! } } });