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 th

Answer 1

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

Answer 2

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

Answer 4

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