2

I am using jQuery flot graph and want to take the print out (or at least the image) of the graph. Now, before asking this question I did lot of research to find out a way..and I come up with this question on stack overflow.

How to print flot graph

I implemented the technique given there.

Now, I am able to get the image of the graph but I am not able to get the contents of the graph i.e. I am just getting plain background of the canvas and not the area drawn over it.

The images below will explain this clearly:

This is what my graph looks like... This is what my graph looks like...

And this is what I am getting after coverting it to image: enter image description here

I am using the ToDataUrl for coversion and below is my code:

  var somePlot = $.plot("#placeholder", [ [0,0],[10,10] ]);
  var canvas = somePlot.getCanvas();
  var img = canvas.toDataURL("image/png");
  document.write('<img src="'+img+'"/>');

In the code above:

somePlot variable is for fetching the canvas which is inside the div as jquery flot implements the graph inside a canvas which I was not able to access directly using its id.

Any help will be appreciated, Thankyou...

Community
  • 1
  • 1
Vikas Arora
  • 1,666
  • 2
  • 17
  • 38

1 Answers1

3

You are not converting your graph to an image, but some testgraph which is empty. See this fiddle (the top graph is made with plot, the bottom one is the image).

If you fix your test data you get this fiddle, which shows the graph both in the plot part and the image. Fixing the data here means inserting more brackets:

var somePlot = $.plot("#placeholder", [ [ [0,0], [10,10] ] ]);

PS: My tests don't use the plugin to add the labels to the canvas, but from your image I see you already got that part right.

Raidri
  • 17,258
  • 9
  • 62
  • 65
  • Thank you very much @Raidri ...I was doing it completely wrong. Now I have corrected the errors..Thanks again for the fiddle and explanation :) – Vikas Arora Nov 29 '13 at 10:43
  • Is there a method to print the axis description too? – Philipp Nies Feb 18 '16 at 14:36
  • 1
    @nagazi Are you using the [canvas plugin](http://www.flotcharts.org/flot/examples/canvas/index.html)? Then it should work out of the box. For alternative solutions see [this answer](http://stackoverflow.com/a/18136509/2610249). – Raidri Feb 18 '16 at 14:43