9

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 ?

NIA
  • 2,523
  • 22
  • 32
Adil Shaikh
  • 44,509
  • 17
  • 89
  • 111

3 Answers3

10

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).

BUT2 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.

Community
  • 1
  • 1
NIA
  • 2,523
  • 22
  • 32
  • 2
    The current master branch (0.8.0) actually does draw axis labels to the canvas. Finalizing that functionality (since many people still want a way to use HTML text) is the last remaining work-item before we release 0.8.0. So the ability to draw the whole plot - including the legend - to canvas is very much part of our future plans. We haven't merged the two existing pull requests because the first is really not implemented well, and the second doesn't match the model we're using for axis labels. – DNS Feb 03 '13 at 18:57
  • @DNS, thanks for the "official" info! I updated the part of my answer on axis labels. – NIA Feb 04 '13 at 09:13
  • i find this great guy here: https://www.amcharts.com/tutorials/intro-exporting-charts/ – Joe RR Mar 29 '16 at 18:36
5

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

Daniel Bang
  • 715
  • 6
  • 21
3

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.

Mark
  • 106,305
  • 20
  • 172
  • 230