FLOT data as image to write to PDF

Question

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?

Answer 1

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();
});

Answer 2

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

Answer 3

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.