Is there a way to export Flot chart to a pdf?

Question

I looked into many places flot issue, chart comparision, stackoverflow ans and none of them syas it is fully possible. Going through this answer it seems it is possible using html2canvas, but is there a angularjs plugin for it?

Can anyone help me find a way to export flot chart to pdf?

Plunker example which has my chart and button handler for export.

Just for the sake of plunker link I am showing my click handler

<button type="button" class="btn btn-default btn-xs" ng-click="exportPdf($event)">Export to PDF</button>

$scope.exportPdf = function($event) {
  alert("Export to pdf click handler");
}

If I was implementing this I'd do it server-side with phantomjs. — Mark, Dec 08 '14 at 20:25

score 1 · Accepted Answer · answered Dec 03 '14 at 17:19

1

Not the exact answer you are looking for. I know Flot is fast and works for many low-end browsers, but Flot has some issues with converting to image nor pdf, because legends are not part of canvas, but a part of html. However, you can export it to an image without legend.

About pdf export, canvas cannot be converted to fully functional pdf, but svg is. Since Flot is using only canvas, it can properly converted properly only to image.

function canvas2Image() {
  var dataURL = document.querySelector("canvas").toDataURL();
  document.getElementById('my-img').src = dataURL;
}

http://plnkr.co/edit/FYW2wj?p=preview

I would recommend you to switch to Highcharts, and it provides all types of exports. http://api.highcharts.com/highcharts#exporting.type

I have been using Highcharts long time and it was satisfactory.

answered Dec 03 '14 at 17:19

allenhwkim

27,270
18
89
122

Thanks. How can I create a file out of this image? Can you show it in [my plunker](http://plnkr.co/edit/hoHyeRRuuP0QGhAVBA3l?p=preview)? – AabinGunz Dec 04 '14 at 04:07
Your plnkr has an error, Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.18/$injector/modulerr?p0=app&p1=Error%3A%20… I can't work with errored plnkr. To create an image from image data, you need to post image data to server, and return it as an image. This is a [nodejs example] http://stackoverflow.com/questions/6926016/nodejs-saving-a-base64-encoded-image-to-disk. – allenhwkim Dec 04 '14 at 15:59
@abi1964, Highcharts converts to PDF so will because they do it serverside using phantomjs. This would also work with flot. – Mark Dec 11 '14 at 14:53

score 1 · Answer 2 · edited May 23 '17 at 12:29

1

Actually to elaborate on allenhwkim's solution - there are options to convert Flot to Image and then to PDF

Please refer to the following question on Stackoverflow:

Saving flot chart to image or pdf

edited May 23 '17 at 12:29

Community

1
1

answered Dec 08 '14 at 11:58

user1914292

1,586
13
38

score 1 · Answer 3 · answered Dec 10 '14 at 13:19

Flot draws its graph on HTML5 element. So the possible scenario might be as follows:

Retrieve image data from canvas with toDataURL as

var canvas = document.getElementById("mycanvas");

var img = canvas.toDataURL("image/png");
Create a PDF with jsPDF, use addImage as in first example to embed the image into it.

Is there a way to export Flot chart to a pdf?

3 Answers3