Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Ability to save the entire plot as an image #221

Open
dnschnur opened this Issue Sep 28, 2012 · 22 comments

Comments

Projects
None yet
6 participants
Owner

dnschnur commented Sep 28, 2012

Original author: abhishea...@gmail.com (March 25, 2009 05:35:30)

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: http://code.google.com/p/flot/issues/detail?id=142

Owner

dnschnur commented Sep 28, 2012

From olau%iol...@gtempaccount.com on March 31, 2009 19:06:38
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.

Owner

dnschnur commented Sep 28, 2012

From olau%iol...@gtempaccount.com on April 03, 2009 11:06:20
Here's one mailing list link, for reference:

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

Owner

dnschnur commented Sep 28, 2012

From jfs...@gmail.com on September 23, 2009 22:49:26
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.

Owner

dnschnur commented Sep 28, 2012

From olau%iol...@gtempaccount.com on October 21, 2009 17:51:01
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).

Owner

dnschnur commented Sep 28, 2012

From abhishea...@gmail.com on May 16, 2010 08:27:17
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

Owner

dnschnur commented Sep 28, 2012

From Tristan....@gmail.com on August 17, 2010 15:23:56
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

Owner

dnschnur commented Sep 28, 2012

From lessa.an...@gmail.com on August 24, 2010 19:26:48
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!

Owner

dnschnur commented Sep 28, 2012

From Tristan....@gmail.com on August 25, 2010 09:56:59
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

Owner

dnschnur commented Sep 28, 2012

From chrisjsh...@gmail.com on September 13, 2010 22:15:31
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

Owner

dnschnur commented Sep 28, 2012

From lessa.an...@gmail.com on September 16, 2010 16:31:54
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

Owner

dnschnur commented Sep 28, 2012

From benjami...@iws-lahr.de on October 14, 2010 12:54:02
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.

Owner

dnschnur commented Sep 28, 2012

From otis.gos...@gmail.com on April 02, 2011 04:15:05
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!

Owner

dnschnur commented Sep 28, 2012

From kobus.my...@gmail.com on October 03, 2011 09:18:33
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

Owner

dnschnur commented Sep 28, 2012

From antonin....@smart-impulse.com on December 05, 2011 13:05:29
@kobusmyburgh : 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 ?

Owner

dnschnur commented Sep 28, 2012

From kobus.my...@gmail.com on January 17, 2012 16:32:34
@antoninlenfant: 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

Owner

dnschnur commented Sep 28, 2012

From screwgoo...@yahoo.com on January 24, 2012 12:40:54
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.

Owner

dnschnur commented Sep 28, 2012

From Rok.Strn...@gmail.com on February 03, 2012 17:07:56
I've just implemented this, and created a GitHub pull request:
#36

Any improvement since then?

I'm dealing with this... I really like Flot, so this is, i think, the last enghacement needed to be easy to do.

If not, i suppose the canvas export to image/pdf could work; i'm trying to add the legend and axis labels to the canvas, any idea? (i'm using this plug in for the last: jquery.flot.axislabels.js)

I would upvote this feature request; being able to use canvas.toDataURL to generate savable images would drastically widen the applicability of Flot for me and my clients.

deerua commented May 11, 2013

BlockRenderers not shown on jqplotSaveImage

I've used Flot in combination with html2canvas (https://github.com/niklasvh/html2canvas) to achieve this. The resulting image includes axis, legend, etc.

Check out this fiddle where an image is created from a flot graph (and ultimately exported to PDF using jsPDF): http://jsfiddle.net/jyu4v/1/

The way I get images and pdfs from flot graphs is to setup a web service that calls an html-to-image or html-to-pdf program. I started with wkhtmltopdf/wkhtmltoimage and am now using phantomjs. http://phantomjs.org/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment