How to use highcharts with princeXML?

Question

I'm evaluating princexml, and it is very very good so far. One minor problem though. Is there any way to save a graph generated by highcharts into princexml, on the browser?

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

Hartsell

Answer 1

One thing you can do is just feed the SVG generated by HighCharts to prince.

One problem you will have with this solution is that IE8 won't generate SVG, but VML, which prince can't render. You may be able to feed your javascript directly to Prince, but we have yet to test this solution out.

Edit:

I actually just tested feeding Prince with the javascript that would generate the SVG... but no luck, so we're stuck with feeding it pre-rendered SVG. Might have to do it server side using a javascript runtime.

Nannienanning

Answer 2

I work at DocRaptor (an HTML to PDF API, using Prince XML for PDF rendering) and we just published a blog post about adding Highcharts to PDFs:

Adding Highcharts to PDFs

Basically, you just need to use our JavaScript engine (which is distinct from Prince's JavaScript engine, and runs before we hand the process off to Prince) and disable animations in the code that renders your graphs.

Ope

Where can I find your JavaScript engine? Is it open source? – Marla

Answer 3

PrinceXML's JavaScript engine doesn't seems powerful enough to do charts with components like Highcharts.

So what I've done is run my page into PhantomJS so it would run the JS and create the SVG elements in the DOM and then feeding the result to PrinceXML.

Be sure to disable animations otherwise you'll print frame 0 of it:

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

Sidle