Turning jQuery charts into PDFs

Question

I've found two jQuery charts plugins I like - flot and jqPlot. I'm thinking of using one of these on the front-end of my web site.

However, I also need to be able to allow users to export data in PDF format. I'm ideally looking for a pure Python solution, but could run to Java or PHP at a push. The quality of the generated charts is the most important factor.

Options I've considered are:

• Generate charts on the server, and create a PDF using those charts. I've looked at matplotlib and several other python charting packages, but the charts don't look anywhere near as polished as flot or jqPlot will make.
• Use Rhino and Env.js to run the same jQuery code on the server, and somehow capture the generated charts and insert those into PDFs. Is this possible with Rhino? How difficult is it likely to be? I've seen the Rhino-canvas project, but it looks way out of date.

What would be the best way of doing this? If I can get the Rhino solution to work that'd be great since it'd maintain consistency between the front-end and generated PDFs.

Answer 1

I suggest to take another look at matplotlib.

The charts are highly customizable and can look very polished. Granted, the many options can be intimidating at first. But a lot of eye-candy effects can be achieved if you know how.

If you want shadows, for instance, take a look at the transforms tutorial.

Furthermore, matplotlib gives you high dpi bitmap images or even PDF vector graphics. I don't know how hard it is to use the mentioned jQuery libraries for higher resolution graphics.

Answer 2

Convert graph to image

As far as I understand it, flot draws to the canvas element (where available). I googled for examples of exporting the canvas content and found canvas2image, for example. It might, or might not, be an avenue to explore.

See this StackOverflow question too. Going from that one, it might be quite simple to export an image (using Canvas.ToDataUrl(type) which takes a mime type. I am quite sure it will not do anything meaningful with application/pdf though...).

Update: Well, look here, a modified version of canvas2image resides in the flotr source: http://flotr.googlecode.com/svn/trunk/flotr/flotr/prototype/lib/canvas2image.js

Generate PDF

There are solutions to generate PDF from within JavaScript on the client:

• CollinsPDF
• jsPDF

End result

Combine these two and you might have a solution.

Answer 3

You can run a headless webkit (rendering engine) with Python and Qt on a server which you can then print to PDF. The changes you need to make to print a PDF with Qt are listed here albeit they might not be complete.

This solution will just render the page and you could store the charts as separate images or go the proposed path of generating a full PDF of the page.