This is a migrated thread and some comments may be shown as answers.

Kendo UI chart series lables rendered incorrectly in PDF generation

5 Answers 84 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Ole Anders
Top achievements
Rank 1
Ole Anders asked on 28 Nov 2013, 08:39 AM
I'm using the Kendo UI dataviz ASP.NET MVC framework for rendering charts, like the example given here (using the ASP.NET MVC version).The graphs and the series lables renders fine in the browser:

Browser snapshot

For generating the PDF, I use the Rotativa framework - using the wkhtmltopdf tool to convert html content to PDF.The graph renders perfectly in the PDF, however the series lables on the top is rendered incorrectly:

PDF Snapshot

As you can see, there is plenty of room for the labels to span out - but they are being rendered "randomly" on top of each other.

I have multiple graphs in the same exported PDF, and the all the labels for all the charts are incorrectly placed.Here is my rotativa action result settings:
return new ViewAsPdf("Reports/_ReportBaseIndex", FilterData)
 {
    PageOrientation = ExportOrientation,
    CustomSwitches = "--disable-smart-shrinking --print-media-type --zoom 0.75 --javascript-delay 1000"
};

Is there any way to fix the lables? Is it possible to statically place the labels, or do I have to recalculate the label positions? If so, how do I do that?

Where can I find the code that positions the series lables ?

We are running kendo UI version 2013.2.918.

5 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 02 Dec 2013, 08:21 AM
Hi Ole,

This question is not directly related to functionality or features that Kendo UI offers and is out of scope of our support services.

On a side note, we have a code library which demonstrates a different approach for exporting Kendo UI Chart to PDF using Inkscape. 

Regards,
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Ole Anders
Top achievements
Rank 1
answered on 03 Dec 2013, 12:47 PM
Hi Iliana,

We can't use inkscape because we need to render additional html based of a given URL. This is why we use Rotativa.

I'm aware that you do not support Rotativa, but could you at least point me in the direction to the code of where the series lables are rendered so we might try to fix it ourselves?

Where can I find the developer versions (non minified scripts) of the javascript files for kendo UI dataviz? When I installed the kendo UI package to the ASP.NET MVC project, only the minified versions of the javascript files were included.

In the worst case if we can't fix this problem, is it possible to disable the legend with the series labels?
0
Iliana Nikolova
Telerik team
answered on 04 Dec 2013, 01:37 PM
Hi again Ole,

The non-minified scripts can be found in the following location from the distribution package:
\\....\src\js

In order to hide the legend you should set legend.visible option to false:
@(Html.Kendo().Chart()
  //....
  .Legend(legend => legend
     .Visible(false)
  )
)


Regards,
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Vik
Top achievements
Rank 1
answered on 14 Dec 2013, 03:59 AM
Ole,

How did you get your graph to work with Rotativa? I am trying to do the same thing, as I have a kendo graph and just a normal table on my view.  But when I pass that to Rotativa to convert to PDF, it pdfs half the graph and it looks shrunk (see attached image)

Could you share your code on how you managed to get it to work?

Thanks
0
Vik
Top achievements
Rank 1
answered on 14 Dec 2013, 07:42 AM
In relation to the above post.  I found the solution.

Add the following
 .Transitions(false)
 .HtmlAttributes(new { style = "height: 400px;width: 1000px" })


Unfortunately I haven't worked out how to fix the legend issue.  But now the graph is drawn all the way and to a decent width.
surbhi
Top achievements
Rank 1
commented on 09 Jul 2021, 10:30 AM

Could you share your code on how you managed to get it to work?
Anton Mironov
Telerik team
commented on 13 Jul 2021, 08:23 AM

Hi Surbhi,

In order to implement the PDF export functionality for the Kendo UI Chart, I would recommend trying the approach from the following demo:

If another product is used(not Kendo-related), please use the support forum of the product owner.

Kind Regards,
Anton Mironov 

Tags
Charts
Asked by
Ole Anders
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Ole Anders
Top achievements
Rank 1
Vik
Top achievements
Rank 1
Share this question
or