Custom export to PDF button

Dashboard Designer SharePoint 2013/2016, Office 365 versions
1

Is there a way to add a custom export to PDF button outside of the chart?

Currently the PDF img sits inside the chart and not very visible.

What if I have multiple charts, how do I reference the export buttons to the right charts?

Thanks.

Capture.JPG920×305 37.7 KB

2

Yes.

  1. Add a link element via the content editor webpart (Edit page -> Insert -> Web Part -> Media and Content -> Content Editor -> Add -> Click the webpart -> Insert -> Embed Code):
<a id="export_button_1" href="">Export to PDF</a>
  1. Change the preRender function in the following way (in Dashboard Designer go to Dashboard -> Advanced):

handlers.preRender = function(config, logger, processor, el) { logger.debug('Configuration: ', config); $('#export_button_1').click(function(e) { e.preventDefault(); el.getKendoChart().saveAsPDF(); }); return true; }

This way you’ll be able to do for any number of charts that are situated on the same page, but of course, you’ll need to use different link elements with different id values.

3

Hi Rostislav,

Sorry to reopen this thread, but for newer versions of Dashboard Designer, I can’t seem to get saveAsPDF() to work any more. I used console.log(el.getKendoChart()) and no longer see saveAsPDF() as one of the functions. Is there something else I can use?

I get the error Object doesn’t support property or method ‘saveAsPDF’

I’ve tried el.getKendoChart().exportPDF() but that doesn’t seem to work for me.

saveAsPDF() works on our older sites that haven’t had the webpart updated.

Thanks,
David

4

Dear David,
Sorry for the delay. As I’ve replied via an email, you can use the following code to save PDF in latest version:

el.getKendoChart().exportPDF({ paperSize: 'auto', margin: { left: '1cm', top: '1cm', right: '1cm', bottom: '1cm' }}).done(function(data) {
    kendo.saveAs({
        dataURI: data,
        fileName: "chart.pdf"
    });
});
5

Hi Nikita,

The code actually fixed the other problem I was having with the axis labels overlapping the chart (in version 2.5.1).

But for the version we have installed on the other site it’s not working. Sorry, I should have mentioned we are only on version 2.6.3.

When clicking on the button it says

Object doesn’t support property or method ‘exportPDF’
kendo.dataviz.js (38,6347)

Here’s the code I have entered:

$(’#export-LF’).click(function(e) {
e.preventDefault();
el.getKendoChart().exportPDF({
paperSize: ‘auto’,
margin: { left: ‘1cm’, top: ‘1cm’, right: ‘1cm’, bottom: ‘1cm’ }}
).done(function(data) {
kendo.saveAs({
dataURI: data,
fileName: “chart.pdf”
});
});
});

I see the function in the console when I console.log(el.getKendoChart());plumsail-exportPDF

6

I’ve been trying some other things.

using exportImage() and saving as a .jpg is working