Creating PDF reports with flot graph

Question

I am trying to implement an automatic report generation tool for my clients . I need to create reports in pdf format and i am very much comfortable in creating graphs using Jquery flot. I just need a way to get the graphs inside the pdf.

I tried using flying saucer (xhtmlrenderer) to capture the image of the graph, but it doesn't seem to help me as the graphs being created by javascript.

can xhtmlrenderer capture the elements created with javascript ?

or is their any other tool which can capture the image of the graph ?

Answer 1

I've put together a JSFiddle with an example of how to accomplish this with Flot + Html2Canvas + jsPDF. The exported PDF includes axis, legend, etc.:

 html2canvas($("#placeholder").get(0), {
   onrendered: function(canvas) {
     document.body.appendChild(canvas);

     var imgData = canvas.toDataURL('image/png');
     var doc = new jsPDF('landscape');

     doc.addImage(imgData, 'PNG', 10, 10, 190, 95);
     doc.save('sample-file.pdf');
   }
 });

JS Fiddle

Answer 2

If you can do this serverside and you are on a Unix based system, I would try wkhtmltopdf.

EDITS AFTER SOME TIME

Now a days, to do this serverside I would use the awesome phantomjs. I've been using this on a flot based project for some time and it works perfectly.

Answer 3

Flot draws its graph on HTML5 <canvas> element. So the possible scenario might be as follows:

1. Retrieve image data from canvas with toDataURL as described in this answer.
2. Create a PDF with jsPDF, use addImage as in first example to embed the image into it.

BUT note, in this scenario you will not see any axis labels in image, because they are not drawn on canvas, they are simple <div> elements positioned with position:relative. I found this post where the author offers a Flot plugin which forces Flot to draw text on canvas, but I have no idea whether it works. UPD: Drawing labels on canvas is included in oncoming 0.8 release (see comments).

BUT² the legend is also not drawn on canvas, it is also a properly positioned <div>. Seems like people in the Flot community are trying to do something with this, I have found two pull requests, the first modifying the core, the other introducing a plugin. Neither of them is merged for about 9 months, and they are marked for v. 0.9 milestone which is after-next and has no due date. At least it is possible to clone those people repos and test their work.

Resume: many people around Flot are concerned with this issue, but sadly there is no stable, out-of-box way to do it yet — only the hope that 0.9 will finally come out sometimes with this issue addressed.