Ability to save the entire plot as an image

[GoogleCodeExporter]

Firefox 3.0.7
I.E 7
Flot 0.5

I have been trying get the Flot graphs that I am generating in the Reports
page. Is there any javascript utility that grabs the screen and converts a
rectangle portion to image?

Also, I have tried doing a canvas2image.toDataURI and save the graph. This
works in Firefox and the graph image is getting downloaded but it has no
axes or legend since they are not a part of the canvas.

To have this working across browsers, the best one would be to have a
screen grabber/ web page grabber and take a rectangle portion of the web
page containing the graphs and save it as an image.

Please let me know your comments and suggestions. I have been stuck on it
for too long.

Original issue reported on code.google.com by abhishea...@gmail.com on 25 Mar 2009 at 5:35

[GoogleCodeExporter]

No wonder. Try searching the mailing list, it's been discussed several times, 
it's
even in the FAQ. I don't think I can do anything about it right now, but I 
think I'll
keep this report open to collect the discussion.

Original comment by olau%iol...@gtempaccount.com on 31 Mar 2009 at 7:06

• Added labels: Type-Enhancement
• Removed labels: Type-Defect

[GoogleCodeExporter]

Issue 139 has been merged into this issue.

Original comment by olau%iol...@gtempaccount.com on 31 Mar 2009 at 7:07

[GoogleCodeExporter]

Here's one mailing list link, for reference:

http://groups.google.com/group/flot-graphs/browse_thread/thread/998f77fb8c088c54

Original comment by olau%iol...@gtempaccount.com on 3 Apr 2009 at 11:06

[GoogleCodeExporter]

Issue 175 has been merged into this issue.

Original comment by olau%iol...@gtempaccount.com on 19 Jun 2009 at 12:29

[GoogleCodeExporter]

I agree with rendering the labels in HTML by default. You get greater control 
over
styling and can more easily attach event listeners. However, if there was an 
option
to render the entire chart via a canvas tag, you could export the graphs with
canvas_instance.toDataURL("image/png")

I think the biggest challenge here is just updating the Flot rendering 
functions to
use either canvas or divs.

Not to start a flame war, but http://www.jqplot.com/tests/canvasAxisTests.php 
writes
the labels via canvas and it rendered fine on the IE6 machine I checked. The 
required
canvas text functions are all Open Source: 1)
http://www.jqplot.com/plugins/jqplot.canvasTextRenderer.js which uses 2)
http://jim.studt.net/canvastext/canvastext.js

Please revisit (optionally) writing the labels and legends in canvas tags. If 
you do
that, it would be trivial to write a JS/jQuery function to create a new canvas 
which
combines all the canvases in a container into a new one then exporting that to 
a data
URL and setting an image source to that URL.

Original comment by jfs...@gmail.com on 23 Sep 2009 at 10:49

[GoogleCodeExporter]

jfsiii: patches are welcome, especially if they are accompanied by a little bit 
of
testing in various browsers + some thoughts about dependencies/how to handle the
dichotomy between canvas text and HTML text (ideally we would only have one).

Original comment by olau%iol...@gtempaccount.com on 21 Oct 2009 at 5:51

[GoogleCodeExporter]

Is there any resolution on this one?

You guys are doing a great service already and having this enhancement in would 
help in 
generating Ad Hoc Reports based on the graph and the captured data.

Abhisheak

Original comment by abhishea...@gmail.com on 16 May 2010 at 8:27

[GoogleCodeExporter]

I would really like to see this implemented, as I believe its a highly sort 
after feature and most "competing" charting solutions have the ability to save 
the chart to an image, but I would much rather stick with flot as its almost a 
perfect fit for our site

Original comment by Tristan....@gmail.com on 17 Aug 2010 at 3:23

[GoogleCodeExporter]

I have an immediate need to export FLOT graphs (including the text) so getting 
this feature figured out is a top priority for me ... I started poking around 
what could become my pointers ... and besides the link provided in a previous 
post:

http://jim.studt.net/canvastext/

I also came across this other project:

http://code.google.com/p/canvas-text/

Both have MIT licenses and they both seem to be good starting points. Has 
anyone created any patches/plugins to address this task yet? I'm about to give 
it a try but I wanted to check with the people here first so I don't get 
started on something that has already been done or that someone else is very 
close to get out the door. Thanks!

Original comment by lessa.an...@gmail.com on 24 Aug 2010 at 7:26

[GoogleCodeExporter]

lessa.andre: I think the last person that said they might do it was quite some 
time ago now, I would do it myself but I just don't have the time, and just 
looking for a plug and play solution which Flot almost is for us except for 
this feature.

If you were to do any work and this and create a patch I would be highly 
interested and appreciate it if you took the time

Original comment by Tristan....@gmail.com on 25 Aug 2010 at 9:56

[GoogleCodeExporter]

The attached patch begins to add the ability to render labels into the canvas, 
as opposed to being in html elements. This will allow you to use the toDataURL 
method to export the image with the labels intact.

To use it, I have added a drawLabel option to the grid options. It has two 
possible values, "html" (default) or "canvas". (I have not added this to the 
documentation, because I'm not sure it this is the best place to put this 
setting.)

The patch has thus far been tested for line charts in Safari 5.

~Chris
cshull@apple.com

Original comment by chrisjsh...@gmail.com on 13 Sep 2010 at 10:15

Attachments:

• canvas_labels.patch

[GoogleCodeExporter]

As I suggested in my Aug post, I did put quite some time to create a plugin to 
render text using FLOT. Release 0.1 of my plugin is ready and available for 
feedback now. 

Ticks, Labels, Data Points ... I'm allowing a lot of things to become part of 
the canvas context. Not sure how useful it will be for others, but it works 
great for me so any feedback is appreciated. My web site has instructions on 
how to get ahold of me so we don't misuse this issues forum.

I didn't take the "patch" route because I wanted something that others could 
easily try it out and rely on ... so I managed to create it as a plugin. It's 
really simple to use. Lots of examples available.  The core functionality (i.e. 
drawing text) is based on Jim Studt's code.

I've tested the text rendering in Firefox (3+), Safari (4+), and Internet 
Explorer (7+).

I've also included examples on how to leverage Jacob Seidelin's canvas2image 
library to get the images out (Sorry, no IE support here).

The actual Javascript Plugin, examples and some documentation are available on 
the site below.

http://lessaworld.com/projects/flotCanvasText/

If you try it out, please send me your feedback.

Thank you!
Andre Lessa

Original comment by lessa.an...@gmail.com on 16 Sep 2010 at 4:31

[GoogleCodeExporter]

well I had a short view on your solution Andre and it really looks nice. Thumbs 
up!

It's ofc a work around to have an export functionality at least for non IE 
users.
I'm currently using a seperate print view html file to support zooming/panning, 
ppl can then print it or "print" it as pdf. It's sure no automatic export what 
you're export would be neither.

I'll have a look at your solution next week and try to implement your 
suggestion with my zooming.

Original comment by benjami...@iws-lahr.de on 14 Oct 2010 at 12:54

[GoogleCodeExporter]

Flotr ( http://solutoire.com/flotr/ ) has this functionality.  Example/demo is 
at http://gr5.org/flotr2a/examples/image-download.html .

I'd love to see this added to Flot!

Original comment by otis.gos...@gmail.com on 2 Apr 2011 at 4:15

[GoogleCodeExporter]

Hi,

I have a new twist on this topic. All the examples given up to now requires 
clicking buttons to save to an image, or making a normal HTML page with just 
the graph, etc.

What I am in need of is a way to display the graphs of various types on the 
page, and then export the page with the graphs (as well as other relevant data) 
to PDF, using DOMPDF. I have managed to implement DOMPDF successfully, and it 
works well, but has limitations - does not support lots of HTML tags.

So, I have taken the following approach, but have been unable to get it to work 
this way. So, I hope someone else has a better option for me to use:

1. Use canvas2html (or similar) to grab all the canvas instances and save each 
one  as an image on the disk without user intervention of any kind (i.e., when 
the report opens, the images are saved immediately into a temp folder).
2. In my HTML, I then refer to the image URLs, pointing to the temporary image 
in the temp folder, and build the report up, which is the exported to the PDF.

Any comments on this would be greatly appreciated.

Kind regards,

Kobus

Original comment by kobus.my...@gmail.com on 3 Oct 2011 at 9:18

[GoogleCodeExporter]

@kobus : Just use wkhtmltopdf, it'll be a piece of cake for it since it uses 
Chrome's rendering engine to "print" the PDF.

But I came here to express my vote for this functionnality. Since it works in 
IE and could be very useful (indeed to export the graphs), why shouldn't it be 
possible ?

Original comment by antonin....@smart-impulse.com on 5 Dec 2011 at 1:05

[GoogleCodeExporter]

@antonin: Thank you for your feedback. Sorry I am only responding now - didn't 
realize that there was a comment on my post.

I have in the mean time switched to another charting library. I am not sure it 
would be a good idea to advertise a competitor here, so mail me if you need the 
name of the charting library I switched to.

Regards,

Kobus

Original comment by kobus.my...@gmail.com on 17 Jan 2012 at 4:32

[GoogleCodeExporter]

Our company has decided to stop using flot, because this crucial feature is 
missing.
We have to be able to properly save graphs.
A proper export to .pdf would also be fine.
But since neither of those things are possible, we've moved away from flot.

The JavaScript plug-in that Andre Lessa mentions would be okay, but it is not 
working with recent flot versions, so that too is not an option for us.

It's very unfortunate, because we did enjoy using flot.

Original comment by screwgoo...@yahoo.com on 24 Jan 2012 at 12:40

[GoogleCodeExporter]

I've just implemented this, and created a GitHub pull request:
https://github.com/flot/flot/pull/36

Original comment by Rok.Strn...@gmail.com on 3 Feb 2012 at 5:07

[GoogleCodeExporter]

Original comment by dnsch...@gmail.com on 23 May 2012 at 2:10

• Changed title: Ability to save the entire plot as an image
• Changed state: Accepted

[GoogleCodeExporter]

i am able to get the flot graph as an image by using canvas2image.js. But 
problem i am facing is that in downloaded image Axis labeling is missing...Can 
any one help me to solve this issue???
Please find the attachment..  

Original comment by mtali...@gmail.com on 11 Oct 2012 at 8:59

Attachments:

• FlotImage.png

[GoogleCodeExporter]

Dear Andre
    First of all thanks so much for developing "Flot Canvas Text" this is exactly the patch I needed.
One small issue is that I do not get any text exported. At first I thought this 
is my code, but even when I
exactly copy any of your examples to my server it works the same

I suspect it has something to do with the font which looks different in my case 
and yours
but what escapes me is where is this font set (by server ?) 

-Leon 

Original comment by pesh...@gmail.com on 12 Feb 2013 at 2:27

[GoogleCodeExporter]

Dear Andre:

Thanks for the great plugin. I tried to use it however I can't make it work. I 
used the source code from your demo site page and script below. Clicking on the 
"Export Image" does not lead to the same image as observed on your example. I 
can not figure out why. Do you have any idea how to fix it? Thanks a lot.

- Jack
    <script language="javascript" type="text/javascript" src="http://lessaworld.com/projects/flotCanvasText/jquery.js"></script>
    <script language="javascript" type="text/javascript" src="http://lessaworld.com/projects/flotCanvasText/jquery.flot.js"></script>
    <script language="javascript" type="text/javascript" src="http://lessaworld.com/projects/flotCanvasText/jquery.flot.text.js"></script>

Original comment by Jiazhu...@gmail.com on 22 Jan 2014 at 4:43