How To Save A Jquery Flot Graph To A .png Or Other Image Format?

I'm using a plugin for Jquery called FLOT http://code.google.com/p/flot/ Once the graph is rendered I want the client to be able to save the graph to a file for later. Any idea on

Solution 1:

The basic way to do it is using canvas.toDataURL("image/png"); but I also found this link for you

http://nihilogic.dk/labs/canvas2image/

I've not tested it.

Solution 2:

If you are willing to use Firefox, I wrote WWW::Mechanize::Firefox, which can save the whole page or elements on a page to PNG.

You can also automate Firefox completely, which I do with ffeedflotr, a small data plotting program that creates flot charts.

Solution 3:

You might look into HighCharts which has an export and print feature. It works by generating all the graphics in SVG before rendering on the canvas. When a user wants an image, the javascript sends the SVG to the server for conversion into an image. See the Exporting Module for more details.

The data structures for highcharts are well documented and not too hard to port flot to highcharts. They also have lots of examples you can interactively play with using jsFiddle.