0

I know that this type of question has been already made. I have seen answers on this topic, but I didn't understand actually how to save a flot chart as an image (png or jpeg). Bellow you have a print screen of my real time graph. enter image description here.

When I click "Save Image As..." the photo which is saved is completely black. I tried many ways but none of them worked for me. So how could I save my graph as an image?

Ionut
  • 724
  • 2
  • 9
  • 25
  • Are you using Windows as your OS? You can Snipping Tool if you just want to capture an image. Start > Accessories > Snipping Tool – Eric S Feb 24 '16 at 14:41
  • Which method / plugin do you use for savingthe image? Show your code! – Raidri Feb 24 '16 at 15:45
  • @Raidri I can't share my code because is pretty big. To save the flot as image I use the next libraries: base64.js, canvas2image.js, jquery.flot.saveAsImage.js. – Ionut Feb 25 '16 at 07:35
  • Then build a small example which reproduces your problem (see [here](http://stackoverflow.com/help/mcve)). – Raidri Feb 25 '16 at 07:56
  • I have something like this: http://www.flotcharts.org/flot/examples/realtime/index.html, but my graph is like the image above. – Ionut Feb 25 '16 at 08:06
  • @Raidri or something like this: http://jsfiddle.net/jyu4v/1/, but I wouldn't want to create that copy bellow chart. – Ionut Feb 25 '16 at 10:52

1 Answers1

0

Here is an updated version of the fiddle you posted in the comments. Instead of generating an image and a PDF document after clicking a link, it creates the image directly after plotting the chart and hides the original canvas. Using "Save Image As ..." on the new chart works fine for me. The code:

$.plot($("#placeholder"), [{
  label: 'Test',
  data: [
    [0, 0],
    [1, 1]
  ]
}], {
  yaxis: {
    max: 1
  }
});

html2canvas($("#placeholder").get(0), {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
    $('#placeholder').hide();
  }
});

When drawing a new chart (after changing the option or so) you have to show() the original container and remove the copy before calling html2canvas(...) again.

Raidri
  • 17,258
  • 9
  • 62
  • 65
  • Well, with the piece of code you provided, my real time graph is not working anymore. – Ionut Feb 25 '16 at 11:33
  • Then you have not implemented it right or there is something special about your chart which I can't help without seeing more of your code. – Raidri Feb 25 '16 at 14:32