FINALLY Easily Save as JPG, PNG, BMP, GIF, or TIFF

[Shawn R.]

This was an six hour research project! There were examples that used Inkscape or ImageMagick or some similar external program that needed to be loaded on your server and use a command-line interface to work. This seemed overly messy and resource intensive. One such example is here - http://www.kendoui.com/code-library/dataviz/chart/kendo-ui-chart-export.aspx 

But there HAD to be a more direct .NET route. Then I stumbled upon this - http://svg.codeplex.com/  and in 6 lines of code (it should have been less) the solution worked!

Simply download the dll from the website above and use code similar to:

        Dim strSVG As String = "YOUR SVG STRING OUTPUT"
        strSVG = strSVG.Replace("style='font: 12px Arial,Helvetica,sans-serif'", "font-family='Arial,Helvetica,sans-serif' font-size='12'")
        strSVG = strSVG.Replace("style='font: 16px Arial,Helvetica,sans-serif'", "font-family='Arial,Helvetica,sans-serif' font-size='16'")
        Dim stream = New System.IO.MemoryStream(System.Text.Encoding.UTF8.GetBytes(strSVG))
        Dim svg = SvgDocument.Open(stream)
        svg.Draw().Save("YOUR FILE LOCATION", System.Drawing.Imaging.ImageFormat.Png)

Change the "System.Drawing.Imaging.ImageFormat" to whatever you would like.

At the end you don't have to save it to a file, you can save it to a stream and post it back as the response as part of a "download chart" submission.

It would have been much easier but the control was struggling with the "style=" syntax in the SVG and it wouldn't save any of the text to the image. Hence the reason for the "Replace" lines - which took additional time to troubleshoot.

According to the powers that be at that site:
"It appears to be that the library doesn't support the 'complex' font syntax in the style attribute. I can't work out why, because the standard FontConverter class should support that syntax (or at least similar ones). "

But the workaround wasn't that hard. I suppose if you change the default formatting for any of the labels or titles in the chart, you will need to adjust your "replace" lines.

Hope this saves someone many hours!

Shawn

[T. Tsonev]

Hi,

We opted to use Inkscape for the demo as it offers export to both vector (PDF) and raster formats. It also appears to handle the generated SVG very well.

With this considerations in mind, the SVG Rendering Engine is an admirable project and using it for image export is perfectly valid. 

Would you mind sharing a sample project as a Code Library in exchange for a generous amount of Telerik points?

Regards,
Tsvetomir Tsonev
the Telerik team

[Shawn R.]

Now featuring PDF export as well using iTextSharp library.

This project uses the following free libraries:

SVG Rendering Engine
http://svg.codeplex.com/ 

iTextSharp
http://sourceforge.net/projects/itextsharp/ 

Notes:
*The PDF export is a bit pixelated. I haven't given up on a Vector PDF implementation - but not yet.
*Setting the charts background to transparent can result in some export problems for certain image types - especially jpeg. Please set a chart background accordingly - "white" works nicely.

Enjoy - Shawn

[T. Tsonev]

Hello,

Thank you for submitting the project. I'm not sure if you'll be able to achieve true vector PDF export in this manner. For this purpose we still recommend using Inkscape.

The Telerik points have been dispatched to your account.

Greetings,
Tsvetomir Tsonev
the Telerik team

[Juan Sola]

Thanks for the code Shawn, works great. Just wanted to post that I was unable to get font replacement work unless I only had 1 font defined: 

svg = svg.Replace("style='font: 12px Arial,Helvetica,sans-serif'", "font-family='Arial' font-size='12'");

In case any one else ran into issues where the font declared was Arial,Helvetica,sans-serif and it displayed Times New Roman once rendered.

[Srinivas]

Hi ,

when I export  kedoui chart data using  SvgDcoument class of Svg namespace as Image  i get the following error "An error occurred while parsing EntityName. Line 1, position 71755." at line of code  "strSVG = SvgDocument.Open(stream)" .I Suspect this is because of exporting huge amount of data. can you please suggest me how to overcome this issue.It works fine for small amount of data. Please find the below snippet code which I used to export data.

      Here svg is string value of chart data which we going to export.







            var stream = new System.IO.MemoryStream(System.Text.Encoding.UTF8.GetBytes(svg));



                var strSVG = SvgDocument.Open(stream);



                System.Drawing.Imaging.ImageFormat imageFormat = System.Drawing.Imaging.ImageFormat.Png;



                var filename = TempFileName() + ".png";



                var bitmap = new System.Drawing.Bitmap(strSVG.Draw());



                bitmap.Save(filename, imageFormat);

 Please help me out of this problem..



Thanks in advance..

 

 

[Flavio Lepka]

tks

[Puneel]

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..

[Puneel]

I got this resolved 

[Puneel]

I got this resolved from another post "Export multiple charts". Its a javascript kendo call which is pretty cool