Export multiple charts to PDF?

27 posts, 2 answers
  1. JohnVS
    JohnVS avatar
    76 posts
    Member since:
    Apr 2013

    Posted 21 Nov 2014 Link to this post

    With the new Q3 2014 update, I see that we can now export charts to PDF. In our case, we have a collection of charts that all need to go in one PDF document. Is that possible?
  2. Answer
    Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 24 Nov 2014 Link to this post

    Hi John,


    Yes, this could be achieved. Take a look at the following demo, which demonstrates advanced exporting of multiple items at once.

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Puneel
    Puneel avatar
    14 posts
    Member since:
    May 2014

    Posted 08 Dec 2014 in reply to Dimiter Madjarov Link to this post

    I have a MVC page where a submit form issues an ajax call to load few kendo ui grids and kendo ui charts in a <div> placeholder, calling the asp.net mvc action. Now I like to add the feature where the same submit button with 'PDF' export option as hidden field, do the same exact content to be exported as PDF. How can I do that? 
    I know I saw examples where I can get svg of the chart on javascript and post it at the submit. But in m case, I have mutliple charts and multiple grids as well. 
    Please help me with a solution..
  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 09 Dec 2014 Link to this post

    Hello Puneel,


    Take a look at the demo from my previous post. It demonstrates how to export multiple elements at once.

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Puneel
    Puneel avatar
    14 posts
    Member since:
    May 2014

    Posted 09 Dec 2014 in reply to Dimiter Madjarov Link to this post

    I did follow but have been encountering a javascript error

    "Uncaught Error: Cannot output undefined to PDF". at 

     return kendo.drawing.exportPDF(group, {
                                paperSize: "auto",
                                margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
                            });

    which wasn't giving real indication of what was causing the the issue. The same chart razor view works fine on HTML rendering but when it comes to exporting it, it was failing. 
    So I tracked it down through elimination process and found out that the ValueAxis label format like below; string.Empty is the culprit. When I replace it with "" then the javascript error disappeared.

    .ValueAxis(value => value.Numeric().Labels(label => label.Format("{0}" + (isPercent ? "%" : string.Empty))))
    But I am happy that finally I am able to get back to my usual work. 

    Thank you. 





  7. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 10 Dec 2014 Link to this post

    Hello Puneel,


    Thank you for the update. have a great day!

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. JohnVS
    JohnVS avatar
    76 posts
    Member since:
    Apr 2013

    Posted 13 Feb 2015 in reply to Dimiter Madjarov Link to this post

    The link to the demo no longer works. Where can I now read about exporting multiple Grids to PDF?
  9. Answer
    Puneel
    Puneel avatar
    14 posts
    Member since:
    May 2014

    Posted 13 Feb 2015 in reply to JohnVS Link to this post

  10. Puneel
    Puneel avatar
    14 posts
    Member since:
    May 2014

    Posted 13 Feb 2015 in reply to Dimiter Madjarov Link to this post

    Hi, I see that examples had been updated in http://demos.telerik.com/kendo-ui/pdf-export/index
    However, I have an issue with my exported PDF. When I have more number of grids and charts in the DIV that I want to export, I would like to export in multiple pages rather than all in single page. Because when I want to print it, the entire content it shrinked and fit in one single page which makes it unreadable. Can you guide me on how I can export to pdf with multiple pages?
    Here is my code.
    $.ajax({
                    type: "GET",
                    url: '@Url.Action("GeneratePdfReport", "Report")',
                    data: {
                        'MeasureIds': MeasureIds,
                        'TaskId': $("#Tasks").val(),
                        'TaskCategoryId': $("#TaskCategories").val(),
                        'ReportType': $('#ReportType').val(),
                        'ChartType': $('#ChartType').val(),
                        'ShowComments': $('#ShowComments').val(),
                        'ShowVarianceAnalysis': $('#ShowVarianceAnalysis').val(),
                        'ShowDataTable': $('#ShowDataTable').val(),
                        'ReportAllMeasuresInTask': $('#ReportAllMeasures').val(),
                        'StartDate': $('#ReportStartDate').val(),
                        'EndDate': $('#ReportEndDate').val(),
                        'UseReportDateRange': $('#UseReportDateRange').val()
                    },
                    traditional: true,
                    success: function(data) {
                        $('#ReportPlaceHolder').html(data);
                        // Convert the DOM element to a drawing using kendo.drawing.drawDOM
                        kendo.drawing.drawDOM($("#ReportPlaceHolder",{forcePageBreak:'.page-break'}))
                            .then(function(group) {
                                // Render the result as a PDF file
                                return kendo.drawing.exportPDF(group, {
                                    paperSize: "auto",
                                    margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" },                               
                                });
                            })
                            .done(function(d) {
                                // Save the PDF file
                                kendo.saveAs({
                                    dataURI: d,
                                    fileName: "Iqc-Export-Pdf.pdf",
                                    proxyURL: '@Url.Action("SaveAsPDF", "Report")',
                            });
                        });    

                        if (document.all && !window.atob) {
                            $('#ReportPlaceHolder').css('display', 'block');
                        } else {
                            $('#ReportPlaceHolder').css('display', 'none');
                        }
                    }
                });

    '.page-break' is the css class that I added to each of the DIV containging kendo grid & chart. So I wanted to force new page on each of those DIVs so that when I print I ll have each paper containing the grid & chart.

  11. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 17 Feb 2015 Link to this post

    Hello Puneel,

    The functionality is currently not available out of the box. We are currently working on providing it with the Q1 2015 release.

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  12. Puneel
    Puneel avatar
    14 posts
    Member since:
    May 2014

    Posted 17 Feb 2015 in reply to Dimiter Madjarov Link to this post

    This is what I got working as of now.
    var root = new kendo.drawing.Group();
    $('#ReportPlaceHolder .page-break').each(function(section) {
                            kendo.drawing.drawDOM(this).then(function (group) {
                                group.options.set("pdf", {
                                    margin: {
                                        left: "1cm",
                                        right: "1cm",
                                        top: "1cm",
                                        bottom: "1cm",
                                    }
                                });
                                root.append(group);
                            });
                        });
                        root.options.set("pdf", {
                            multiPage: 'true',
                        });
                        kendo.drawing.pdf.saveAs(root, "iqc-pdf.pdf", '@Url.Action("SaveAsPDF", "Report")');

    However, it would be nice if a grid is large and automatically spit into a second page automatically, it would be awesome.

    Any thoughts?
  13. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 19 Feb 2015 Link to this post

    Hello Puneel,

    As stated previously the feature is not supported at the moment, but we are working on providing a solution in the upcoming release.

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  14. Puneel
    Puneel avatar
    14 posts
    Member since:
    May 2014

    Posted 19 Feb 2015 in reply to Dimiter Madjarov Link to this post

    THank you and looking forward for that.
  15. Sha
    Sha avatar
    4 posts
    Member since:
    Mar 2014

    Posted 19 May 2015 Link to this post

    Hi,

    Just wonder if the export multiple controls to PDF feature is available now?

     

    Thanks,

    Sha

  16. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 20 May 2015 Link to this post

    Hello Sha,

    As discussed in the first post, the feature is supported. It is demonstrated in the following demo. Different features were discussed in the following posts.

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  17. Rachael
    Rachael avatar
    5 posts
    Member since:
    Jan 2016

    Posted 11 Apr in reply to Dimiter Madjarov Link to this post

    Hi,

    I was wondering if the newer versions support exporting a large grid to multiple pages instead of shrinking it into one now? An example or documentation link of how to do this would be helpful if it does!

    I am currently using the code below from the demo here: http://demos.telerik.com/kendo-ui/pdf-export/index

    function exportPdf () {
           // Convert the DOM element to a drawing using kendo.drawing.drawDOM
           kendo.drawing.drawDOM($(".content-wrapper"))
           .then(function (group) {
               // Render the result as a PDF file
               return kendo.drawing.exportPDF(group, {
                   paperSize: "A4",
                   margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" },
                   muliPage:  "true"
               });
           })
           .done(function (data) {
               // Save the PDF file
               kendo.saveAs({
                   dataURI: data,
                   fileName: "HR-Dashboard.pdf",
                   proxyURL: "//demos.telerik.com/kendo-ui/service/export"
               });
           });
       };

    I have also used the the built in PDF export using the .Pdf property of the grid, both shrink to fit though...

    thanks,

    Rachael

  18. Mihai
    Admin
    Mihai avatar
    153 posts

    Posted 12 Apr Link to this post

    Hello,

    The next version, to be released in May, will support that by default when the paperSize option is present and different from "auto".

    Regards,
    Mihai
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  19. Rachael
    Rachael avatar
    5 posts
    Member since:
    Jan 2016

    Posted 12 Apr in reply to Mihai Link to this post

    Thank you!
  20. Mark
    Mark avatar
    17 posts
    Member since:
    Dec 2010

    Posted 24 Jun in reply to Dimiter Madjarov Link to this post

    Hello: I am looking to do the same thing, but the link to the example is broken.  Is there an example of exporting multiple charts to one pdf available.

    Thanks.

  21. Mark
    Mark avatar
    17 posts
    Member since:
    Dec 2010

    Posted 24 Jun in reply to Dimiter Madjarov Link to this post

    I am trying to do the same thing, but the above link to the demo is broken.  Is it still available?
  22. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 27 Jun Link to this post

    Hello Mark,

    You could find the sample PDF export demos on the following page.

    Regards,
    Dimiter Madjarov
    Telerik
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  23. Etienne
    Etienne avatar
    3 posts
    Member since:
    Sep 2016

    Posted 06 Nov Link to this post

    Hi

    I've got multiple charts displayed on the same web page and need to export it to PDF but with some control.Typically I need to add some text here and there outside of the charts, and make sure that each chart is a on a separate page on the final result. 

    What would be a good approach for implementing this

    At the moment I'm thinking about creating a new View specific for the PDF export (with each chart being a partial view which is already the case anyway) and using a third party library to render the view and return pdf from server side code. 

    Is there such capabilities from the Telerik lib? All examples I've seen so far consist of drawing what's already displayed on the screen and dump it in a PDF file which I don't think can work in my case.

    Thanks a lot 

  24. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 07 Nov Link to this post

    Hello Etienne,

    Yes, those configurations are part of the Kendo UI PDF export functionality. The following documentation pages will be helpful in implementing it:

    Multi-Page PDF Output
    http://docs.telerik.com/kendo-ui/framework/drawing/drawing-dom#configuration-Multi-Page

    Automatic Page Breaking
    http://docs.telerik.com/kendo-ui/framework/drawing/drawing-dom#configuration-Automatic

    Header and Footer templates
    http://docs.telerik.com/kendo-ui/framework/drawing/drawing-dom#configuration-Template

    Regards,
    Dimiter Madjarov
    Telerik by Progress
     
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
     
  25. Etienne
    Etienne avatar
    3 posts
    Member since:
    Sep 2016

    Posted 07 Nov in reply to Dimiter Madjarov Link to this post

    Hi Dimiter

    Thanks for your response it helps a lot. I like this functionality it's very quick however I'm struggling to mix text with my charts.

    I've tried to put my text in an hidden div which I toggle visible when exporting to pdf but that makes the screen flicker so that's not good. 

    So I'm trying the approached with a div outside of the screen with position absolute. 

    My problem is that I cannot get this text to be on the same page as the chart (I need A4 format). BasicallyI'm trying something like this:

    $(".export-pdf").click(function() {        
        kendo.drawing.drawDOM("#pdfheader", {         
            margin: "2cm",
        }).then(function(headergroup){
            kendo.drawing.drawDOM("#chartsContainer", {             
                paperSize: "A4",
                margin: "2cm",
                scale: 0.8 
            }).then(function(maingroup){
                maingroup.children.push(headergroup);
                kendo.drawing.pdf.saveAs(maingroup, "multipage.pdf")
            })                      
        });
    });

    but the text in the "header" div takes a full page followed by the charts. 

  26. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 08 Nov Link to this post

    Hello Etienne,

    You could try defining a template for the exported content, similarly to the following example. It has header an footer div elements which are explicitly positioned via CSS on the top and bottom of the page. The rest of the content is also placed via CSS in between them.

    Regards,
    Dimiter Madjarov
    Telerik by Progress
     
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
     
  27. Etienne
    Etienne avatar
    3 posts
    Member since:
    Sep 2016

    Posted 08 Nov in reply to Dimiter Madjarov Link to this post

    Thanks

    I think this will work for me however I was hoping you could tell me what was wrong with my approach above. 

    The template will be good if I only have one page but I might have more in the future and I don't want to repeat the text on each page. 

  28. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 09 Nov Link to this post

    Hello Etienne,

    The template is applied to each individual page, even on multiple page export. This is demonstrated in the example from my previous post.

    Regarding the other approach, I cannot state what is the exact issue with it, without inspecting a runnable version. If further assistance is required regarding this, you could open a ticket and send us the runnable version of the code, so we could advise further.

    Regards,
    Dimiter Madjarov
    Telerik by Progress
     
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
     
Back to Top
Kendo UI is VS 2017 Ready