How to format for print and export group of graphs

7 posts, 1 answers
  1. Lee
    Lee avatar
    52 posts
    Member since:
    May 2019

    Posted 04 Dec 2019 Link to this post

    I am trying to export a group of charts to a pdf. The chart grouping is similar to the ones here: https://demos.telerik.com/kendo-ui/pdf-export/index

    I would like to reformat them so that they fit nicely on a letter size piece of paper. I looked at the example here: https://demos.telerik.com/kendo-ui/pdf-export/page-layout.

    My issue is that in this example, the web page is already formatted like the printed page. In my case I want to take example 1 (pdf-export/index) and format it like example 2 (pdf-export/page-layout).

    I tried using the .k-pdf-export class to do this but my charts ended up sized incorrectly with pieces cut off. 

    What is the best way to accomplish my goal?

  2. Petar
    Admin
    Petar avatar
    178 posts

    Posted 06 Dec 2019 Link to this post

    Hi Lee,

    The functionality you are trying to achieve is demonstrated in this Dojo example. The export is not fine-tuned(the output file is not well-formatted) but demonstrates how we can add header and footer to an exported to PDF HTML content. 

    The key thing here is the definition of the template that will be used for the exported document and the CSS code that formats this template. 

    Check the linked Dojo project and let me know if you have any questions. 

    You may also find useful the below links:

    I hope the above will help you implement the functionality you want to achieve. 

    Regards,
    Petar
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Lee
    Lee avatar
    52 posts
    Member since:
    May 2019

    Posted 06 Dec 2019 in reply to Petar Link to this post

    It looks like this dojo avoids the issue by not resizing the charts from the way they appear on the screen. I wanted mine sized differently so they fit nicely side by side on the page and fill the vertical height. 
  4. Petar
    Admin
    Petar avatar
    178 posts

    Posted 10 Dec 2019 Link to this post

    Hi Lee,

    I am not sure that the PDF export supports Chart's resizing in a way they fit on the page of the exported document. Let me try to implement the desired functionality and I will write you back in the next 48 hours with feedback about this case. 

    Regards,
    Petar
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Lee
    Lee avatar
    52 posts
    Member since:
    May 2019

    Posted 10 Dec 2019 in reply to Petar Link to this post

    Great. Thanks.
  6. Answer
    Petar
    Admin
    Petar avatar
    178 posts

    Posted 12 Dec 2019 Link to this post

    Hi Lee,

    Please check this Dojo example. It demonstrates the desired functionality of exporting the charts from the previously discussed Dojo project in separate pages in the exported file. 

    To be able to achieve the desired functionality, we have to programmatically resize the Charts before the export of the document and scale them back once the PDF is exported. 

    The scaling is done once on "PDF export" button click and then the resize to the original dimensions can be done using two approaches:

    Approach 1: Using setTimeout function

                       kendo.drawing.pdf.saveAs(group, "Invoice.pdf");
                      	setTimeout(function(){                   	                        						                                             		$("#referrals").css({"width":"20%","height":"240px"}).data("kendoChart").resize();
                            $("#applications").css({"width":"20%","height":"240px"}).data("kendoChart").resize();
                            $("#users").css({"width":"50%","height":"240px"}).data("kendoChart").resize();  
                        }, 800)
                    })

    Approach 2: Using a callback function of the proxyUrl of the kendo.drawing.pdf.saveAs function.

              kendo.drawing.pdf.saveAs(group, "Invoice.pdf", "/someurl",function(){
                            $("#referrals").css({"width":"20%","height":"240px"}).data("kendoChart").resize();
                            $("#applications").css({"width":"20%","height":"240px"}).data("kendoChart").resize();
                            $("#users").css({"width":"50%","height":"240px"}).data("kendoChart").resize();           
            	});

    Regards,
    Petar
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  7. Lee
    Lee avatar
    52 posts
    Member since:
    May 2019

    Posted 12 Dec 2019 in reply to Petar Link to this post

    Thank you, Petar. This should do the trick. 
Back to Top