Forum How do I...?

Support for javascript charting libraries

I have downloaded and installed the 8.1 release from Tuesday. One thing that I had trouble with in 8.0 is that I could not use javascript charts (Google, High Charts, Flot, etc.) within my HTML documents. I also have not found an SVG library for PHP that produced the kind of output that I was happy with.

So, after installing 8.1, I can run:

$ prince --input=html --javascript -o ~/Downloads/test-google.8.1.pdf


$ prince --javascript -o ~/Downloads/test-flot.pdf

but can only see a blank canvas where the chart(s) should be. The Google example emits a ton of warnings (not surprising, given that there is a lot of other stuff going on with the page), but the flot example does not give any warnings.

My question is whether there is a javascript charting library that was used for testing the new version, a trick I should try to get the results I'm looking for, or if this is still on the roadmap. I'm evaluating PrinceXML to be used to power a reporting platform to replace TCPDF, and charts are the last checkbox on what we need it to be able to do.
There are still some features that we need to implement in order to support popular charting libraries, so we are planning a Prince 8.2 release, visible on the development roadmap. In the meantime, charts may be able to work if they use SVG and not <canvas>, and don't rely on AJAX (eg. XMLHttpRequest) or any other features that we haven't had time to support yet.
Charting libraries which use SVG and no AJAX include RaphaelJS, d3, and its ancestor protovis.

I have not (yet) tried them.

John Haugeland is

Many of the d3 samples use XMLHttpRequest to pull down JSON data to graph, so they won't work yet unless the data is embedded in the page source.
Do you have a sample HTML file of d3 working with Prince? My alternative plan is to fuss and fight with getting SVG to match a particilar chart style by hand, which isn't what I necessarily want to do. :)
I don't have one, at the moment I'm not sure if d3 will work, even if AJAX requests are disabled.
I'm experimenting with a few workarounds on this one.

The first approach is to try and roll my own SVG library to generate the specific charts I'm after (to pass into PrinceXML). I've tried out a handful of open source projects and they rendered just fine, but they don't look as nice as our current TCPDF graphs.


As I am basically learning SVG from scratch, my math and charts are only about 80% of what I want them to be.

The second approach that I started recently is to attempt to use a headless browser such as PhantomJS <>. The workflow for that is to spin off a separate process when building my HTML that gets the SVG string as the output of PhantomJS as it parses a separate HTML file that contains all the javascript and styles need to build the chart.

1) Build HTML for input into prince, encounter chart data
2) Fire off a process to PhantomJS to parse a cached HTML file that builds the chart and reads back the contents of a particular div containing the SVG code.
3) Replace the chart data in the HTML file with the generated SVG code.
4) Pass the HTML file with the generated SVG inline to PrinceXML for output.

You can probably guess this is a slow process, as I have to wait for essentially two browsers (Phantom and Prince) to parse the data before I can get one PDF. And right now it is fairly imperfect, as certain Javascript-based charting libraries aren't great at rendering in anything but a few select browsers.

All of this to say, "How's 8.2 coming along?" :)
Proceeding as fast as humanly possible. :)
Wanted to touch base on this one again. We haven't made much progress with coming up with a separate process for this, and it would really free us up to do some cool stuff in our platform. We are happy to test experimental verisons.
We plan to release a development preview in the next couple of months that will include some further JavaScript DOM improvements.