Saving flot chart to image or pdf

Question

I'm trying to save a flot chart to an image and eventually to a pdf, but can't quite figure out how.

Online I see that I can do

canvas.toDataURL("image/png")

But the trouble is how do I get the canvas in the first place, the examples say to use

document.getElementById("canvas");

but for my code I'm using a div with id="placeholder" (per all the flot examples) and there's nothing labeled with a canvas tag in my html, and this doesn't seem to work. My javascript for flot looks like

$.plot($("#placeholder"), [ d1, d2, d3 ], { series: {
          lines: { show:false },
          bars: { show: true, barWidth: 0.6, horizontal:true } }  });

Does anyone have a working example that plots a flot graph and then has a button to either save/view as image or pdf?

There are several questions that sort of already answer this, but they are missing some key details as far as I can tell -- my apologies for being thick on this.

So what about `var canvas = document.getElementById("placeholder");` or `$("#placeholder")[0]`? — Tomasz Nurkiewicz, Mar 13 '12 at 22:30
Thanks Tomasz, if I do `var canvas = document.getElementById("placeholder").firstChild;` I get the graphics of the chart but not the text (axes, labels, etc) — OneSolitaryNoob, Mar 13 '12 at 23:52

score 9 · Accepted Answer · answered Mar 14 '12 at 15:33

You're not going to like the flot v 0.7 solution for this. The labels are not on the canvas, they are HTML elements that are positioned around it. So forget about having them written to your image, it's not going to happen with flot as is.

If you are really keen, what you need to do is get the latest version of flot out of github to write labels to the canvas (which means you won't be able to style them beyond the basics - i.e. no CSS and no making them links), and then you'll be OK (and don't forget to see the new API.txt). If you need to get the canvas, flot provides a method for that:

var plot = $.plot($("#placeholder"), [ d1, d2, d3 ], { series: {
          lines: { show:false },
          bars: { show: true, barWidth: 0.6, horizontal:true } }  });
var ctx = plot.getCanvas();

//do whatever with ctx.toDataURL("image/png")

The only change I've really suggested here is to upgrade flot to the latest (unreleased) version.

thanks ryley. that might work in the short term anyway. is there any way to just grab the whole
and render it, html and chart included? — OneSolitaryNoob, Mar 14 '12 at 17:26
If your ultimate goal is to render to PDF, replacing the canvas with an image is going to be necessary... then if you're using something like wkhtmltopdf or dompdf, they will be able to convert the rest just fine... — Ryley, Mar 14 '12 at 17:40

score 1 · Answer 2 · answered May 09 '12 at 00:21

I did this by using a third party application called cutyCapt http://cutycapt.sourceforge.net/ This takes snapshots of webpages. So i had to create a dummy webpage containig the flot image and then fed the website to this function:

public bool FlotToImage(string website, string destinationFile)
    {
        string cutyCaptPath = ConfigurationManager.AppSettings["CutyCaptPath"];
        if (!File.Exists(cutyCaptPath))//check if found cutyCapt application
        {
            return false;
        }
        ProcessStartInfo startInfo = new ProcessStartInfo();
        startInfo.FileName = cutyCaptPath; // path to executable file

        startInfo.Arguments = " --url=" + website + " --out=" + destinationFile;// the arguments
        startInfo.CreateNoWindow = true; //optional
        startInfo.WindowStyle = ProcessWindowStyle.Hidden; //optional

        Process process =Process.Start(startInfo);
        process.WaitForExit();
        return true;
    }

Hope this helps someone. This actually took me a while to do since I had to also implement a login bypass to the "dummy" website with the flot.

Saving flot chart to image or pdf

2 Answers2

Linked