5

I am using jQuery/FLOT to draw a graph, I would like for the user to be able to download a PDF version of the graph. I am writing the PDF using ColdFusion. After creating the graph I then send the html of the graph div, via ajax to a CF script that uses cfdocument to write the pdf. The problem is that in the PDF, it only displays the axis and labels, not the actual graph data. Does anybody know of a way to get the actual image that is dynamically created on the canvas?

Kelly
  • 53
  • 1
  • 3
  • They are adding support for that through the canvas-text plugin on the next version (0.8). You can use the beta already: http://www.flotcharts.org/blog/2013/03/06/announcing-flot-08-beta/ After this is implemented you will need to directly acess the plot canvas element and get it as an image then upload the image to the server and add it to your pdf. – Hoffmann Mar 14 '13 at 16:50
  • You can check this answer at: http://stackoverflow.com/a/30811190/1953178 – Amr Hossam Jun 12 '15 at 20:11

4 Answers4

3

You could render the chart on the server with a headless browser like phantomJS (WebKit engine).

You only need a script that takes an URL and renders the output as a Base64 encoded string to the console stream or writes an image.

As far as I know it's the only semi browser-independent way to do this.

Here's a script for phantomjs that outputs a given web page as base64 encoded image-string:

var page = require('webpage').create();
var system = require('system');

var pageUrl = system.args[1];

page.viewportSize = { width: 1280, height: 720 };
page.open(pageUrl , function () {
    console.log(page.renderBase64('PNG'));
    phantom.exit();
});
Frank
  • 2,507
  • 1
  • 12
  • 11
  • This is the most robust way to achieve an image or PDF of a Flot graph. The htmltocanvas and canvastoimage scripts are very limited. PhantomJS renders the HTML including a canvas just like a real web browser would. This solution probably works best if you setup your own web service for html-to-image/pdf and create a special print friendly page for each page you want to convert to image or PDF. – Ryan Dec 03 '14 at 17:19
2

You could also take a snapshot of your canvas using toDataURL() and substitute in an img element, which the PDF converter should be able to handle:

var canvas = $("canvas.base")[0];
var tmpimg    = canvas.toDataURL("image/png");
//console.log(tmpimg);
$("body").append('<img src="'+tmpimg+'"/>');

Note that the image produced is just the canvas contents (ie, the graph itself) and does not include the axes or legend. You might have to do some tricky substitution/alignment of the image in the flot placeholder, but it gets you a usable image to start from.

This is just a slight re-working of the accepted answer to this question and I thought somebody here might find it useful.

Community
  • 1
  • 1
Brendan Moore
  • 1,131
  • 7
  • 13
2

Check out CutyCapt (http://cutycapt.sourceforge.net/), it seems to work with Flot.

Tjo
  • 21
  • 2
1

I don't think this has been implemented in flot yet see http://code.google.com/p/flot/issues/detail?id=175

Tarski
  • 5,360
  • 4
  • 38
  • 47