Exporting RadHtmlChart to PNG and PDF

Hi Gustavo,

You can invoke the function that triggers the export (getSvgContent in the original post) in the Sys.Application.Load event to immediately export the chart.

An alternative is using a library like PhantomJS to get the image on the server and replace the Reponse object with that image as soon as you know you need export (e.g., on the initial Page_Load on the server according to some querystring value).

Note that you cannot close the form if it has already been shown when the response is changed to a file instead of the markup of the page. This is the general way requests and responses work.


Regards,

Marin Bratanov
Telerik

hi i am getting this error when i export it as png
i have attached error image 

hello Marin Bratanov
i am using above code to convert chart as image
bt i get this error 
is it require to download inkscape?
i am attaching error screen shot
help me out this

hello Marin Bratanov
i am using above code to convert chart as image
bt i get this error 
is it require to download inkscape?
i am attaching error screen shot
help me out this

hello Marin Bratanov
i am using above code to convert chart as image
bt i get this error 
is it require to download inkscape?
i am attaching error screen shot
help me out this

Hi,

Yes, for this sample to work you need to download and install InkScape and configure the path to the executable, as explained in the original post.


Regards,

Marin Bratanov
Telerik

I am using the getSVGString() javascript method to get the svg contents of my chart. However, the returned string contains invalid xml as shown below. (no space between stroke-=''linecap and also extra single quote characters in stroke-li=''nejoin='round' . I can get round the issue with a replace string after getting the string, but ideally would prefer the string to be valid xml in the first place.

Can this be fixed please?

<?xml version='1.0' ?><svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='500px' height='250px' style='position: relative; display: block;'>
<defs id='k11305'>
<radialGradient id='k11301' cx='195.5' cy='141' fx='195.5' fy='141' r='72.79999999999998' gradientUnits='userSpaceOnUse'>
<stop offset='0%' style='stop-color:#fff;stop-opacity:0.06' />
<stop offset='83%' style='stop-color:#fff;stop-opacity:0.2' />
<stop offset='95%' style='stop-color:#fff;stop-opacity:0' />
</radialGradient>
</defs>
<path style='display: block; ' d='M0 0 500 0 500 250 0 250 z' stroke='' stroke-width='0' stroke-linecap='square' stroke-linejoin='round' fill-opacity='1' stroke-opacity='1' fill='#ffffff'></path>
<path style='display: block; ' d='M5.5 37.5 386.5 37.5 386.5 245.5 5.5 245.5 z' stroke-width='0.1' stroke-linecap='square' stroke-linejoin='round' fill-opacity='1' stroke-opacity='1' fill='none'></path>
<path id='k10877' style='display: block; ' data-model-id='k10876' d='M5 37 386 37 386 245 5 245 z' stroke='' stroke-=''linecap='square' stroke-linejoin='round' fill-opacity='0' stroke-opacity='1' fill='#fff'></path>
<text x='214' y='25' fill-opacity='1' style='font: bold 8pt Arial,Helvetica,sans-serif; ' fill='#000'>Quality Report</text>
<g id='k10875' ></g>
<path id='k11304' style='display: block; ' data-model-id='k11314' d='M227.5 211.5 240.5 240.5 247.5 240.5' stroke='#939393' stroke-width='1' stroke-linecap='square' stroke-linejoin='round' fill-opacity='1' stroke-opacity='1' fill='none'></path>
<path id='k11303' style='display: block; ' data-model-id='k11312' d='M164.5 71.5 152.5 43.5 140.5 43.5' stroke='#939393' stroke-width='1' stroke-linecap='square' stroke-linejoin='round' fill-opacity='1' stroke-opacity='1' fill='none'></path>
<g>
<path id='k11302' style='display: block; ' data-model-id='k11314' d='M 195.5 68.2 A72.79999999999998 72.79999999999998 0 1,1 141.399 92.287 L 195.5 141 z' stroke-width='0.5' stroke-linecap='square' stroke-linejoin='round' fill-opacity='1' stroke-opacity='1' fill='green'>
</path><path id='k11315' style='display: block; ' data-model-id='k11314' d='M 195.5 68.2 A72.79999999999998 72.79999999999998 0 1,1 141.399 92.287 L 195.5 141 z' stroke-width='0.5' stroke-linecap='square' stroke-linejoin='round' fill-opacity='1' stroke-opacity='1' fill='url(#k11301)'></path>
</g>
<g>
<path id='k11300' style='display: block; ' data-model-id='k11312' d='M 141.399 92.287 A72.79999999999998 72.79999999999998 0 0,1 195.5 68.2 L 195.5 141 z' stroke-width='0.5' stroke-linecap='square' stroke-linejoin='round' fill-opacity='1' stroke-opacity='1' fill='blue'></path>
<path id='k11313' style='display: block; ' data-model-id='k11312' d='M 141.399 92.287 A72.79999999999998 72.79999999999998 0 0,1 195.5 68.2 L 195.5 141 z' stroke-width='0.5' stroke-linecap='square' stroke-linejoin='round' fill-opacity='1' stroke-opacity='1' fill='url(#k11301)'></path>
</g>
<g>
<path style='display: block; ' d='M391 103.5 490 103.5 490 141.5 391 141.5 z' stroke='' stroke-width='0' stroke-linecap='square' stroke-li=''nejoin='round' fill-opacity='1' stroke-opacity='1' fill='none'></path>
<text id='k11311' data-model-id='k11310' x='410' y='120' fill-opacity='1' style='font: 12px Arial,Helvetica,sans-serif; cursor: pointer;' fill='#000'>NCR's Closed</text>
<text id='k11309' data-model-id='k11308' x='410' y='134' fill-opacity='1' style='font: 12px Arial,Helvetica,sans-serif; cursor: pointer;' fill='#000'>NCR's Open</text>
<path style='display: block; cursor: pointer;' data-model-id='k11310' d='M396.5 112.5 403.5 112.5 403.5 119.5 396.5 119.5 z' stroke='green' stroke-width='1' stroke-linecap='square' stroke-linejoin='round' fill-opacity='1' stroke-opacity='1' fill='green'></path>
<path style='display: block; cursor: pointer;' data-model-id='k11308' d='M396.5 126.5 403.5 126.5 403.5 133.5 396.5 133.5 z' stroke='blue' stroke-width='1' stroke-linecap='square' stroke-linejoin='round' fill-opacity='1' stroke-opacity='1' fill='blue'></path>
</g>
<text id='k11307' data-model-id='k11314' x='252' y='244' fill-opacity='1' style='font: 12px Arial,Helvetica,sans-serif; ' fill='#000'>26 , 87 %</text>
<text id='k11306' data-model-id='k11312' x='91' y='47' fill-opacity='1' style='font: 12px Arial,Helvetica,sans-serif; ' fill='#000'>4 , 13 %</text>
</svg>

Hello Christian,

If you aren't using the latest official version of Telerik UI - 2014.2.618, does upgrading to it fixes the issue?
If this step, however, do not help could you please try to reproduce the issue with the code below and then tell us what changes you have made, so that I can proceed further with the investigation:
ASPX:



Regards,
Danail Vasilev
Telerik

On my aspx page I have a Chart called Chart_TotalClicks.
But when the following jquery runs, i get a null value.  What am i missing?

$(document).ready(function () {
            var chart = $find("<%=Chart_TotalClicks.ClientID%>");
            alert(chart);
});

Hi Joseph,

You need to use the Sys.Application.Load event to work with IScriptControl client-side objects, jQuery's document.ready and the window.onload events are too early and those objects are not instantiated yet. You can find more information on the matter here: http://www.telerik.com/help/aspnet-ajax/window-troubleshooting-javascript-from-server-side.html.


Regards,

Marin Bratanov
Telerik

Hey Marin,
So I did what you said.  The following is my code, and it still not working.
on the aspx page i have an asp button:  <asp:Button ID="printPDF" runat="server" Text="Print To PDF"></asp:Button>

and on the aspx.vb:


and back on the aspx side the following javascript:

Oh one note on above, it errors out on the javascript end - var pageChart = $(".k-chart").getSVGString();

Hello Joseph,

Have you had a chance to examine the article I linked: http://www.telerik.com/help/aspnet-ajax/window-troubleshooting-javascript-from-server-side.html? It explains how you need to use the Sys.Application.Load event, as I advised: http://msdn.microsoft.com/en-us/library/bb383829.aspx.

With it, your code should look something like:

 

 

Regards, Marin Bratanov
Telerik

Hey Marin,
I did read the links and tried all of those suggestion, and this route was the one that is closer to my situation.  So i did everything you said above, using Sys.Application.add_load but i'm still getting an error on getSVGString(); - pageChart.getSVGString is not a function

Note I change the code around to see if i am getting the chart and I am:

Hello Joseph,

jQuery element wrappers, by themselves, do not have a getSVGString() method.

You need to reference the RadHtmlChart object, as shown in the original post and as you tried in your first, to get that:

assuming that Chart_TotalClicks is the server ID of your chart.

 

If you want to access the underlying Kendo widget, you need to go through the element's data attributes as shown here: http://demos.telerik.com/kendo-ui/chart-api/index. For example:

 

and then you can use its svg() method: http://docs.telerik.com/kendo-ui/api/dataviz/chart#methods-svg. This is what the getSVGString method from RadHtmlChart calls.

When modifying projects provided as an example, I strongly advise that you examine them to see how the logic is tied together and how controls are properly accessed, so you can use the same approach in your code. Documentation and demos we have can help with other ideas and approaches as well, so reading them can also be helpful. 

Regards,

Marin Bratanov
Telerik

thanks, Henrik. your solution (utilizing a web method wrapping SVG.NET) sounds pretty good. are you still happy with it?

Hello friends, my problem is that the functions RadHtmlChart1.Height.Value and RadHtmlChart2.Width.Value returns me 0 as a value, although my graph has size, what caused this?

Thanks.

Hello Gustavo,

Can you ensure that you have set the Width and Height properties of the chart? I am asking about that because I have tried to reproduce the mentioned issue but to no avail - you can see my video test in the attached archive.

Can you also tell us which is your version of Telerik UI controls? If it is not the latest one - 2014.2.724, does upgrading to it resolve the issue?

Regards,
Danail Vasilev
Telerik

Danail Vasilev said:Hello Gustavo,

Can you ensure that you have set the Width and Height properties of the chart? I am asking about that because I have tried to reproduce the mentioned issue but to no avail - you can see my video test in the attached archive.

Can you also tell us which is your version of Telerik UI controls? If it is not the latest one - 2014.2.724, does upgrading to it resolve the issue?

Regards,
Danail Vasilev
Telerik

 

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items

 

Hi Danail, 
I will check what you mention me, I have another doubt, there's problem to run inkscape.exe when i mount the project in IIS?
I have to give permissions on the Program Files folder?

Thanks.

Hello Gustavo,

This question is not directly related to the RadHtmlChart control, so that in order to get a reliable answer it is best to direct it to the inkscape forum -  http://www.inkscapeforum.com/

Nevertheless I am not aware whether it is necessary to give explicitly any permissions to the application pool for accessing and running inkscape with the default window's settings. The current code library works properly on my side without any additional permission configurations.

Other options I can suggest are:

• look into using PhantomJS, a library that can run a browser on the server and take a snapshot of the page inside
• wait for the Q3 2014 release when a feature will be available in RadHtmlChart that will allow modern browsers that support FileAPI and blobs to directly export the chart to an image on the client

Regards,
Danail Vasilev
Telerik

Danail Vasilev said:

Other options I can suggest are:

• look into using PhantomJS, a library that can run a browser on the server and take a snapshot of the page inside
• wait for the Q3 2014 release when a feature will be available in RadHtmlChart that will allow modern browsers that support FileAPI and blobs to directly export the chart to an image on the client

Regards,
Danail Vasilev
Telerik

Hello Danail,

in the quoted post you relied on waiting for the Q3 2014 Release in order to achieve an export functionality for RadHtmlChart. Now it is released, and I can't find anything new regarding this issue. Am I wrong or is there still no "official" function to export a Chart to e.g. PDF?

Thanks in advance,

regards

Jan Fiedler

Well. We woul benefit most from having a way to get the image on the server-side for embedding in documents and reports. It doesnt seem that hard to accomplish, but since its a "nice to have" feature for me, I wont spend time and resources to make a solution that i feel Telerik have failed to deliver.

In general I'm extremely satisfiew with the asp.net Ajax toolset but this seems to be a huge oversight that Telerik won't take seriously.

Well, as we are using the Controls heavily, even for nice PDF reports to send to the management, it would be very nice to have such a feature, not just "nice-to-have"...

I've been waiting for this svg to png functionality as we currently using the inkscape application for server-side printing. Due to security implications we cannot put the inkscape.exe on our servers (in the cloud) so really do need this functionality. Can someone from Telerik please definitively answer whether this functionality is available or not, and if it is how to implement it i.e I assume there is a new javascript function to perform the saving of the file to disk/stream.

Hi guys,

I will try to address each query in turn:

@Jan - the built-in facility for client-side export to PNG is available. To use it, you need the following:

1. get the Kendo widget that powers RadHtmlChart as shown here: http://www.telerik.com/help/aspnet-ajax/htmlchart-client-side-api.html.
2. use its ImageDataUrl method as shown here: http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#methods-imageDataURL.

This requires that the browser supports FileAPI, so old IE versions will not work.

@Henrik - it is actually very difficult to get an SVG image that has been rendered on the client (browser) on the server and generate another format from it. There are many open source libraries that do this, so it is rather pointless to copy their code into our assembly and bloat it. In the following threads you can find ideas of other libraries that can work with the SVG string:

• http://www.telerik.com/forums/export-chart-to-an-image-and-to-pdf.
• http://stackoverflow.com/questions/24680542/kendo-chart-export-to-jpg-or-png.

@Christian - I believe the information above should answer your questions. To summarize it - in modern browsers you can now export RadHtmlChart to a PNG directly in the browser. To get it on the server, you should use an approach similar to the one shown in the original post in this code library, together with a third party library that can convert the SVG string to the format you require. 

Regards,

Marin Bratanov
Telerik

Well the optimal solution would be if you didn't need a client roundtrip to get an image.
Earlier in this thread, I demonstrated a way to make the image using 3.party libraries but it required you to get the svg on the client and send it to the server.. 
Thats not a good option when you need to server-generate a PDF.

You could argue that one can use 3rd party libraries to accomplish this, but on the other hand..  ..you can use 3rd party libraries to do allmost everything that the Telerik AJAX suite does, so using that argument everything in the product could be considered "bloat".
Now i don't think that is the case..  Your AJAX suite is excellent, and it solves a lot of problems that programmers would otherwise use weeks and months to accomplish..  ..just as a server-side chart generation would...

The is a demand for this as far as I can see..

If I could jus somehow get the SVG code on the server-side it would take us be quite a long way to solving this.

@Marin - i must disagree with you and agree with Henrik -- native *server-side* export is a very important feature. one that the old RadChart could do...not w/ its RadHtmlChart replacement that feature is lost. Why is this important?

1) we use the generated emails to attach to automated workflows. Other apps hit our ChartEngine.aspx and generate images which are supposed to be saved on the server and then attached to emails going to facility staff.

2) as a global customer and a Fortune 100, we simply cannot use just any other third-party control. We have serious security restrictions in place in production, which is why Telerik had to become a "preferred solution partner" for our organization. Now it can no longer do the job to be done. This is creating a lot of headache in our org -- we fought hard to get Telerik, and now Telerik can't do the job to be done.

...Please take *server-side* chart image export seriously. It is a a glaring product omission.  Including it fixes that shortcoming, and does not "bloat" the controls. There are plenty of other UI controls & features that I would consider bloat before this.

(this thread is from Aug 2012 -- the fact that we're still asking for it, two years later, should be proof of its usefulness... native server-side chart saving is a major need in enterprise apps)

Hi guys,

Let me start by pointing out that the main paradigm around which RadHtmlChart is built is client-side rendering and operation. This means that all the work is done with JavaScript. This is the very first feature of the control we showcase (documentation, demos and product overview page). This is also the reason why we never advertised exporting or server-side chart generation with this control.

So, this code library was created to show one possible way of getting that image which is rendered by the client browser, on the server, precisely because there is some demand for it, and we do take it seriously.

To continue with server-side rendering - the RadChart control is still available in theTelerik.Web.UI assembly and you can still use it (as explained in the blog post that announced that it is obsolete). Its documentation is still live, its demos remain in the LiveDemos project you can download from your account, its forum is still live even though we do not monitor it. RadChart is marked as obsolete because it has not been actively developed for several years and this makes sure this messages is clear enough. The control is in just about the same state it was three years ago and you can keep using it if pure server-side chart creation is an important objective.

Ultimately, the UI for ASP.NET AJAX suite is a user interface toolset, not a reporting engine (we do have the Telerik Reporting for that, and it also offers charts and can save files on the server). Thus, moving towards client-side operation is a natural step for the suite.

I do understand that in some cases the suite will not offer every feature you would need, and we do try to add the ones most requested so we can aid you in your work. This is why this code library exists, and why RadChart remains in the assembly.

@Henrik - I am glad that our software is helping your in your work. We will try to examine and showcase an integration with a library like PhantomJS that will result in pure server-side operation from the end user point of view (even though it would run a browser on the server).

@Matt - we are already in touch with you via your account managers and I would suggest continuing the discussion there if you have outstanding questions.

Regards,

Marin Bratanov
Telerik

Thanks. The problem w/ using the RadChart is the lack of support for it. Our architecture group has a very hard time accepting a solution that is not explicitly covered by support. Pretty common restriction in the enterprise world.

PhantomJS is intriguing, but also a hard sell to enterprise -- an unsupported .EXE listener running in production enterprise web servers doesn't sit well (for valid reasons).

Hopefully we can figure something out. Your proposed solution model:

- loading page
- saving the chart's SVG-output into a hidden field
- triggering a second postback
- reading the hidden SVG back in into an SVG-rendering component like Inkscape server-side
- saving to the desired server folder

...does work, but it's not really ideal for multiple reasons. Thus at this point it's likely easier to use a screenshot-grabber utility to isolate & save a portion of the HTML output. But it's just one more (difficult) sell to our global architecture group, who never like approving various one-off components to do various things...they like much tighter control of the solution portfolio, and already approved broad solutions like RadControls are so much more preferred.