Exporting RadHtmlChart to PNG and PDF

Thread is closed for posting
87 posts, 0 answers
  1. 63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 posts
    Member since:
    Oct 2004

    Posted 09 Aug 2012 Link to this post

    Requirements

    RadControls version

     Q2 2012 SP2, R2 2020 SP1 (2020.2.512)+

    .NET version

     3.5/4.0

    Visual Studio version

     2008/2010/2013/2015/2017/2019

    programming language

     C# or VB.NET

    browser support

    all browsers supported by Telerik UI

    PROJECT DESCRIPTION

    Solution 1 based on RadClientExplortManager

    Note: As of Q1 2015 you can exportRadHtmlChart to PDF or Image on the client-side through the RadClientExportManager control. You can find an example in the HtmlChart - Export to PDF demo. For Telerik UI for ASP.NET AJAX versions prior Q1 2015, you can export the chart on the server-side through a third party tool as illustrated below.

    Solution 2 based on a third-party tool named InkScape.

    ***Update on 5/18/2020 for InkScape 1.0 and Telerik.Web.UI.dll R2 2020 (version 2020.2.512) - please check out this post which applies to the latest versions of Telerik.Web.UI and InkScape 1.0 - https://www.telerik.com/support/code-library/exporting-radhtmlchart-to-png-and-pdf/page/3#kQ8ybom-3UuyDphPWO2ULQ.***

    The RadHtmlChart renders on the client via JavaScript which means that it is not directly available on the server to enable easy exporting like the RadChart does. Moreover, since SVG or VML is used browsers cannot save/export the image out of the box.

    A possible solution is to use a third party software that can convert the SVG image to a more common user format such as PNG or PDF. This, however, requires that first the SVG rendering of the chart is transferred to the server. To do this in older browsers that do not support SVG we added a method that will return the SVG rendering of the RadHtmlChart (getSVGString()). It is available in the internal builds since 2012.2.801 and it will be in the official Q2 2012 SP2 release as well.

    The InkScape SVG editor is suitable for the task, because it is open source and is designed to handle SVG. You can download it from the following link: http://inkscape.org/download/?lang=en. More information about its export options is available in this page.

    Two simple sites are attached to the thread (one in C# and one in VB) that show an example of how this can work. For ease of use the options needed by InkScape are provided in a separate class (HtmlChartExportSettings) that is initialized in the code-behind of the page with the necessary settings that are obtained from the page itself. A static class is used for the actual creation of the PNG/PDF file and for sending it to the client (HtmlChartExporter). Comments in the code itself provide more detailed explanations over each action.

                                       
  2. 00E75DC3-1019-4D36-A5D2-C3E3651A8E78
    00E75DC3-1019-4D36-A5D2-C3E3651A8E78 avatar
    22 posts
    Member since:
    Dec 2010

    Posted 20 Sep 2012 Link to this post

    Hello Team,

    I am trying to export RadhtmlChart (pie chart) to PDF format using third party tool called "EvoPDF" which helps to convert HTML to PDF.
    EVO HTML to PDF Converter offers full support for HTML tags, CSS and SVG.


    Currently using EvoPDF i am successfully able to generate pie chart into PDF, but issue is the pie chart which is exported to PDF is
    getting black.The original pie series consist of various different colors and in the PDF all the pie series are getting black.

    Can you help to get the RadHtmlChart work together with EvoPDF.

    Did RadHtmlChart support EvoPDF(EvoPDF supports SVG)?


    Thanks,
    Aakansha

  3. A1CE16C4-4C2E-464E-BF18-532525D276CA
    A1CE16C4-4C2E-464E-BF18-532525D276CA avatar
    5948 posts
    Member since:
    Apr 2022

    Posted 24 Sep 2012 Link to this post

    Hello,

    I have just answered your forum thread on the same issue and I am pasting my reply here as well:

    We do not support third party plugins and the way they handle SVG. What I see in the screenshot makes me think that EvoPDF does not properly support coloring and gradients, which is what the RadHtmlChart uses extensively (radialGradient is used in the PieChart and how Evo handle its color is not something we can control or fix).

    Kind regards,
    Marin Bratanov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  4. 3A079F01-DE00-4B34-A48E-89BD0E9A5AF8
    3A079F01-DE00-4B34-A48E-89BD0E9A5AF8 avatar
    21 posts
    Member since:
    Jan 2013

    Posted 01 Mar 2013 Link to this post

    hi
    i am putting this code online it gives this error

    Access to the path 'D:\hosting\5419957\html\elections\App_Data\temp.svg' is denied.

    Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code. 

    Exception Details: System.UnauthorizedAccessException: Access to the path 'D:\hosting\5419957\html\elections\App_Data\temp.svg' is denied. 

    ASP.NET is not authorized to access the requested resource. Consider granting access rights to the resource to the ASP.NET request identity. ASP.NET has a base process identity (typically {MACHINE}\ASPNET on IIS 5 or Network Service on IIS 6 and IIS 7, and the configured application pool identity on IIS 7.5) that is used if the application is not impersonating. If the application is impersonating via <identity impersonate="true"/>, the identity will be the anonymous user (typically IUSR_MACHINENAME) or the authenticated request user. 

    To grant ASP.NET access to a file, right-click the file in Explorer, choose "Properties" and select the Security tab. Click "Add" to add the appropriate user or group. Highlight the ASP.NET account, and check the boxes for the desired access.

    Source Error: 

    Line 148:        //create a temporary SVG file that Inkscape will use
    Line 149:        currentSettings.SvgFilePath = Server.MapPath("~/App_Data/temp.svg");
    Line 150:        System.IO.File.WriteAllText(currentSettings.SvgFilePath, svgText);
    Line 151:
    Line 152:        //get the export format - png or pdf

    Source File: d:\hosting\5419957\html\elections\PieChart.aspx.cs    Line: 150 

  5. A1CE16C4-4C2E-464E-BF18-532525D276CA
    A1CE16C4-4C2E-464E-BF18-532525D276CA avatar
    5948 posts
    Member since:
    Apr 2022

    Posted 04 Mar 2013 Link to this post

    Hi Qurat,

     The exception and its explanation, as offered by the framework, are quite complete - the Windows user that the IIS service uses does not have enough permissions to create (i.e. write, modify, delete) a file in the App_Data directory. The message contains information on providing the needed user rights so that your IIS can work with the file. This problem stems from your IIS/machine configuration and not from our controls.


    Regards,
    Marin Bratanov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. 3A079F01-DE00-4B34-A48E-89BD0E9A5AF8
    3A079F01-DE00-4B34-A48E-89BD0E9A5AF8 avatar
    21 posts
    Member since:
    Jan 2013

    Posted 12 Mar 2013 Link to this post

    hi Marin,
    i am trying to use client template(from the< toolstipApperance/>) for my radhtmlchart (type:pie) but i am unable to do it because i am using a dataset from the DB.
    i tried using this 
      //PieChart1.PlotArea.Series[0].TooltipsAppearance.ClientTemplate = ds.Tables[0].ToString();
    it is also not working.
    please help me i have to submit the project and i have very less time

    here is a piece of code :
     DataSet ds = DbHelper.ReadTable(sql1);
        
            if (ds != null && ds.Tables[0] != null && ds.Tables[0].Rows != null && ds.Tables[0].Rows.Count > 0)
            {
                //string[] arr = new string[15];
               
                for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
                {
                    SeriesItem si = new SeriesItem();
                    si.YValue = (decimal)ds.Tables[0].Rows[i]["VoteShare"];
                    si.Name = (string)ds.Tables[0].Rows[i]["PartyName"];
                     
                    si.BackgroundColor = System.Drawing.ColorTranslator.FromHtml((string)ds.Tables[0].Rows[i]["PartyColor"]);
                    PieChart1.PlotArea.Series[0].Items.Add(si);
                    //PieChart1.PlotArea.Series[0].TooltipsAppearance.ClientTemplate = (string)ds.Tables[0].Rows[i]["PartyName"];
                    //arr[i]=si.Name.ToString();
                    
                }

                //PieChart1.PlotArea.Series[0].TooltipsAppearance.ClientTemplate = ds.Tables[0].ToString();
                
            

    attaching my project files

    regards
    @nnu shah
    punjab lok sujag

  7. F536B03E-A4EA-4FCC-8A3F-17E38FC3226D
    F536B03E-A4EA-4FCC-8A3F-17E38FC3226D avatar
    9 posts
    Member since:
    Aug 2012

    Posted 25 Mar 2013 Link to this post

    Hi guys

    I successfully managed to produce my graph using the suggested inkScape application (THANKS!!!)

    I did fine one issue that is a bit troublesom...  when drawing the HTML chart, I specify the width (750px) of the chart, but not the height as I want the chart to resize as needed for the lables.  When I fire the SaveImage button (as in your example), the RadHTMLChart1.Width.value property returns correctly, but the RadHTMLChart1.Height.Value is empty.  Only when I specify a height does it come through.

    Not sure if I'm doing something wrong, or if the height does not calculate correctly?
    Any ideas (code for the chart is below)

    <telerik:RadHtmlChart runat="server" ID="rchtSummary" Width="750px" DataSourceID="dsOverallSummary" Style="float: left;">
                                                            <PlotArea>
                                                                <Series>
                                                                    <telerik:ColumnSeries Name="Exemplary" DataFieldY="Exemplary" Stacked="true">
                                                                        <Appearance FillStyle-BackgroundColor="#0af90b"></Appearance>
                                                                        <TooltipsAppearance></TooltipsAppearance>
                                                                        <LabelsAppearance Visible="false">
                                                                        </LabelsAppearance>
                                                                    </telerik:ColumnSeries>
                                                                    <telerik:ColumnSeries Name="Good" DataFieldY="Good" Stacked="true">
                                                                        <Appearance FillStyle-BackgroundColor="#88ac3e"></Appearance>
                                                                        <TooltipsAppearance></TooltipsAppearance>
                                                                        <LabelsAppearance Visible="false">
                                                                        </LabelsAppearance>
                                                                    </telerik:ColumnSeries>
                                                                    <telerik:ColumnSeries Name="Adequate" DataFieldY="Adequate" Stacked="true">
                                                                        <Appearance FillStyle-BackgroundColor="Yellow"></Appearance>
                                                                        <TooltipsAppearance></TooltipsAppearance>
                                                                        <LabelsAppearance Visible="false">
                                                                        </LabelsAppearance>
                                                                    </telerik:ColumnSeries>
                                                                    <telerik:ColumnSeries Name="Poor" DataFieldY="Poor" Stacked="true">
                                                                        <Appearance FillStyle-BackgroundColor="Orange"></Appearance>
                                                                        <TooltipsAppearance></TooltipsAppearance>
                                                                        <LabelsAppearance Visible="false">
                                                                        </LabelsAppearance>
                                                                    </telerik:ColumnSeries>
                                                                    <telerik:ColumnSeries Name="Defective" DataFieldY="Defective" Stacked="true">
                                                                        <Appearance FillStyle-BackgroundColor="Red"></Appearance>
                                                                        <TooltipsAppearance></TooltipsAppearance>
                                                                        <LabelsAppearance Visible="false">
                                                                        </LabelsAppearance>
                                                                    </telerik:ColumnSeries>
                                                                </Series>
                                                                <XAxis DataLabelsField="Description" >
                                                                    <LabelsAppearance Visible="true" RotationAngle="-45"></LabelsAppearance>
                                                                    <MinorGridLines Visible="false"></MinorGridLines>
                                                                    <MajorGridLines Visible="false"></MajorGridLines>
                                                                </XAxis>
                                                                <YAxis MaxValue="100">
                                                                    <LabelsAppearance DataFormatString="{0}%"></LabelsAppearance>
                                                                    <MinorGridLines Visible="false"></MinorGridLines>
                                                                </YAxis>
                                                            </PlotArea>
                                                            <Legend>
                                                                <Appearance Visible="true" Position="Right"></Appearance>
                                                            </Legend>
                                                        </telerik:RadHtmlChart>
  8. 9915F819-5226-40CF-90E0-E07E884605ED
    9915F819-5226-40CF-90E0-E07E884605ED avatar
    1502 posts
    Member since:
    Jan 2017

    Posted 27 Mar 2013 Link to this post

    Hi Mark,

    The code for exporting the RadHtmlChart gets the values of the server-side width and height properties. That is why when you do not specify the server-side height property it has a default value of 0.

    If you want, however, to get the actual dimensions(width and height) of the RadHtmlChart, then you can use the client-side methods - get_height and get_width to obtain them and then save these values in a hidden field, so that they can be available in the code behind as well. Please find below an example on how to do that:

    ASPX:
    <asp:HiddenField ID="chartDimensionsHolder" runat="server" />
    ...
    JavaScript:
    <script type="text/javascript">
        function getSvgContent(sender) {
            //obtain an SVG version of the chart regardless of the browser
            var chartRendering = $find("<%=RadHtmlChart1.ClientID %>").getSVGString();
            //store the SVG string in a hidden field and escape it so that the value can be posted to the server
            $get("<%=svgHolder.ClientID %>").value = escape(chartRendering);
            //initiate the postback from the button so that its server-side handler is executed
     
            var chart = $find("<%=RadHtmlChart1.ClientID %>");
            //obtain the actual width and height of the chart
            var chartHeight = chart.get_height();
            var chartWidth = chart.get_width();
            //store the chart dimensions as a string in a hidden field
            $get("<%=chartDimensionsHolder.ClientID %>").value = chartHeight + ";" + chartWidth;
            __doPostBack(sender.name, "");
        }
    </script>
    C#:
        protected void Button1_Click(object sender, EventArgs e)
        {
            //obtain the necessary settings for exporting the chart
            HtmlChartExportSettings currentSettings = new HtmlChartExportSettings();
     
            currentSettings.Height = (int)RadHtmlChart1.Height.Value;
            currentSettings.Width = (int)RadHtmlChart1.Width.Value;
     
            //Get the actul dimensions of the chart
            string[] clientSideDimemsions = chartDimensionsHolder.Value.Split(';');
            int clientSideHeight = int.Parse(clientSideDimemsions[0]);
            int clientSideWidth = int.Parse(clientSideDimemsions[1]);
     
            //If the server-side width and height properties are not set, assign the ones from the client-side
            if (currentSettings.Height == 0)
            {
                currentSettings.Height = clientSideHeight;
            }
            if (currentSettings.Width == 0)
            {
                currentSettings.Width = clientSideWidth;
            }
    ...

    I have added a HiddenField in the markup and modified the JavaScript function getSvgContent and C# function Button1_Click from the VS example in the Exporting RadHtmlChart to PNG and PDF Code Library.

    Kind regards,
    Danail Vasilev
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  9. E4681D4C-86C9-43F6-AD74-973C3A862FDB
    E4681D4C-86C9-43F6-AD74-973C3A862FDB avatar
    12 posts
    Member since:
    May 2006

    Posted 17 Apr 2013 Link to this post

    The sample is clear and works like charm!

    In the solution I'm building now the charts will be created dynamically serverside, like this

    Dim chart As New RadHtmlChart()
    chart.Width = Unit.Pixel(1200)
    chart.Height = Unit.Pixel(600)
    chart.ChartTitle.Text = "testchart"
    'some logic to actually create the series and format the chart
    Me.HtmlChartHolder.Controls.Add(chart)

    Now I would like to add the possibility to download these charts as a png as well. However the getsvgcontent function works clientside and the chart will be added later. Can you hint me on how to export dynamically created charts to png?  

    The goal would be something like this:

    chartengine.aspx?graphdefintion=mygraph&rendermode=png

    which will create the chart serverside and send the chart as an image to browser (so that my customer can use these pre created charts in external reports as well)


    Any clue appreciated
    thnx
    Walther
  10. A1CE16C4-4C2E-464E-BF18-532525D276CA
    A1CE16C4-4C2E-464E-BF18-532525D276CA avatar
    5948 posts
    Member since:
    Apr 2022

    Posted 19 Apr 2013 Link to this post

    Hi Walther,

    RadHtmlChart renders entirely on the client and thus a server-side only export cannot be achieved with it. A RadHtmlChart can only be rendered once the page is received in the browser. This is why the original project shows a way to get this rendered markup back to the server in order to create an image from it.

    You can consider starting a browser on the server to render the chart and post back the needed data so that you can use it, but I have not explored this approach and I cannot guarantee it is suitable, scalable or even possible.

    Perhaps an option would be to trigger the client-side functions that will export the chart on page load - the pageLoad() JavaScript function that is a shortcut to the Sys.Application.Load event can be helpful for this.

    Should you succeed in achieving such a scenario you could post it as a code library project and we will gladly award your efforts and contribution with Telerik points.


    All the best,
    Marin Bratanov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  11. E4681D4C-86C9-43F6-AD74-973C3A862FDB
    E4681D4C-86C9-43F6-AD74-973C3A862FDB avatar
    12 posts
    Member since:
    May 2006

    Posted 19 Apr 2013 Link to this post

    Thank you for your response Marin, I feared this would be a challenge already.
    I did some experiments using this http://www.websitesscreenshot.com/ and this works perfectly, bypassing al client side issues.
    Now I have one codebase for nice interactive charts for the user, and predefined charts captured as images (which will be used in external reports).
    best regards
    Walther


  12. A1CE16C4-4C2E-464E-BF18-532525D276CA
    A1CE16C4-4C2E-464E-BF18-532525D276CA avatar
    5948 posts
    Member since:
    Apr 2022

    Posted 23 Apr 2013 Link to this post

    Hello Walther,

    It is good to hear things are working out for you. If you share your experience and a sample in a new code library project I am sure the community will benefit from it.


    Regards,
    Marin Bratanov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  13. 0E67168D-B01A-4894-8902-F7D36AE00AFD
    0E67168D-B01A-4894-8902-F7D36AE00AFD avatar
    1 posts
    Member since:
    Feb 2012

    Posted 26 Jul 2013 Link to this post

    Hi Martin,

    I have implemented this solution for exporting SVG to our application but unfortually when I export out the data in PNG format (I haven't tried PDF) the chart renders fine but all of the Text is missing (Header, Axis Points, Text on the line), is it possible to export this data out too?

    Thanks in Advance
    Neil
  14. 9915F819-5226-40CF-90E0-E07E884605ED
    9915F819-5226-40CF-90E0-E07E884605ED avatar
    1502 posts
    Member since:
    Jan 2017

    Posted 31 Jul 2013 Link to this post

    Hi Neil,

    Could you please specify what do you mean by Text is missing (Header, Axis Points, Text on the line). Is this the ChartTitle, Axis Labels,Ticks and Series Labels? If that is so I have tried to reproduce the unexpected behavior with the exact code provided (just changed the PieSeries to LineSeries) in this CL, using inkScape as a third party software for export, but to no avail. You can watch a short video with the test in the attached archive and then tell me if I am missing something.

    If, however, you mean that some markup, located outside the HtmlChart's SVG is missing, note that this is expected, as the inkScape gets and export only the HtmlChart's SVG rendering.

    Regards,
    Danail Vasilev
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  15. C81E2C0C-1709-4BFD-BF2C-3164F7241F4A
    C81E2C0C-1709-4BFD-BF2C-3164F7241F4A avatar
    61 posts
    Member since:
    Aug 2013

    Posted 22 Aug 2013 Link to this post

    I like the idea that Walther did to save the chart by capturing it to an image using the capture control he gave the link to. I need to do the same and capture and save the chart to an image file and then allow a user to get the image. So how would you run an aspx page on the server for this? I need to have an aspx page where I pass parameters for the chart. And in the page have it generate the chart, save it as an image file on the server and then send a response saying it is there on the server. I am not actually sending the chart image back as a reply. This is for a specific reason on the backend. Any suggestions? I probably want to use the html capture control Walther used so I get all of the text to the chart.

    Thanks,

    Warren
  16. 9915F819-5226-40CF-90E0-E07E884605ED
    9915F819-5226-40CF-90E0-E07E884605ED avatar
    1502 posts
    Member since:
    Jan 2017

    Posted 27 Aug 2013 Link to this post

    Hi Warren,

    There are many tools on the internet that can be used for capturing snap shots of websites on the server. May be the suggested one by Walther is a reasonable approach for the current scenario. However, I cannot provide any particular solutions, because this matter requires additional research that gets out of the scope of our support services.

    Should you succeed in achieving the desired functionality, do not hesitate to share it with the rest of the community be creating a CL. We would be glad to reward you with Telerik points in turn, for your efforts and contribution.

    Regards,
    Danail Vasilev
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  17. C81E2C0C-1709-4BFD-BF2C-3164F7241F4A
    C81E2C0C-1709-4BFD-BF2C-3164F7241F4A avatar
    61 posts
    Member since:
    Aug 2013

    Posted 28 Aug 2013 Link to this post

    Hello,

    I did find a solution doing what Wather did. I downloaded the web capture control he mentioned. I then created two separate projects. The first was one that uses the web capture control where I pass the URL and it will capture and save the web page to a file. The second project was one that creates and displays the RadHTMLChart by itself on a web page. I am passing parameters to this page so it knows what chart to generate since I am doing multiple ones. So I just have the web capture project call the chart aspx page and it captures it to a file. It can also respond with the image and return that if you need, This solution may not fit everyone's needs but it works for what I need.

    Thanks,

    Warren
  18. FAADCA78-16EE-408D-B7BF-6E9CE0008570
    FAADCA78-16EE-408D-B7BF-6E9CE0008570 avatar
    17 posts
    Member since:
    Mar 2011

    Posted 13 Sep 2013 Link to this post

    If you are having problems with accents in character, try changing the following line:

    $ get ("<% = svgHolder.ClientID%>"). value = escape (chartRendering);

    to:

    $ get ("<% = svgHolder.ClientID%>"). value = encodeURIComponent (chartRendering);

    I had this problem and solved with this tip.
    Roberto Pires
  19. B5275B8A-B66E-4E01-8F46-1B1F1C936295
    B5275B8A-B66E-4E01-8F46-1B1F1C936295 avatar
    8 posts
    Member since:
    Oct 2012

    Posted 04 Dec 2013 Link to this post

    Hi ,
         I'm trying to export (pdf export with the string data) the string data it consists of '&' in the data binding in the xaxis .The svg file was not created for the string data While exporting as pdf. I attached the sample solution for this . please find the attachments  and tell me how to over come this issue. 

    Thanks,
    Jegan
  20. 9915F819-5226-40CF-90E0-E07E884605ED
    9915F819-5226-40CF-90E0-E07E884605ED avatar
    1502 posts
    Member since:
    Jan 2017

    Posted 09 Dec 2013 Link to this post

    Hello Jegan,

    Since the RadHtmlChart renders entirely on the client through JavaScript and SVG, special characters in the labels and titles must be escaped, so that they do not break the JavaScript. You can use for example the back slash for the escaping:
      <telerik:RadHtmlChart  runat="server" ID="RadHtmlChart1" Width="800" Height="600">
       ..
        <PlotArea>
          ..
            <XAxis Color="Black">
                <Items>
                    <telerik:AxisItem LabelText="First  \& five" />
                    <telerik:AxisItem LabelText="second" />
                    <telerik:AxisItem LabelText="third" />
                    <telerik:AxisItem LabelText="fourth" />
                </Items>
    ...
              </XAxis>
    ...
        </PlotArea>
    </telerik:RadHtmlChart>

    More information on the matter is available in Handling Special Symbols help article.

    Regards,
    Danail Vasilev
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  21. B5275B8A-B66E-4E01-8F46-1B1F1C936295
    B5275B8A-B66E-4E01-8F46-1B1F1C936295 avatar
    8 posts
    Member since:
    Oct 2012

    Posted 15 Dec 2013 Link to this post

    Hi ,
         I just used  back slash for the escaping the '&' symbol it's not worked , Chart will render but while exporting the chart image as pdf or png the svg file is not created .It shows error . I attached the sample solution , kindly get it and test the export with pdf and png functionality the svg file is not created properly the x axis items are not available in the created svg file I attached the screen shot for that .Please check and let me how to over come this issue.





    Thanks,
    Jegan

  22. 9915F819-5226-40CF-90E0-E07E884605ED
    9915F819-5226-40CF-90E0-E07E884605ED avatar
    1502 posts
    Member since:
    Jan 2017

    Posted 18 Dec 2013 Link to this post

    Hello Jegan,

    You are right that ampersands cannot be exported by inkScape. RadHtmlChart can render them, however, once the SVG is passed to the inkScape it cannot export the SVG. I have tried replacing the '&' symbol with its HTML Entity/Unicode representation but to no avail. What I can suggest is that you make a further research on ways around handling that with inkScape or try using other third party software that can export SVG image to pdf format.

    Regards,
    Danail Vasilev
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  23. D39D89CA-331E-4BDC-B2DE-757BAB1AE3BC
    D39D89CA-331E-4BDC-B2DE-757BAB1AE3BC avatar
    105 posts
    Member since:
    Jul 2008

    Posted 13 Feb 2014 in reply to A1CE16C4-4C2E-464E-BF18-532525D276CA Link to this post

    Hi,

    For dynamically created charts :

    - Create a hidden div for string manipulation :
    <div id="svgExportHolder" style="display:none;"></div>

    - Using jquery, find the chart div container (your created your charts server side in a container like a panel or whatever so you can refer to this id to find the chart you want)
    The div tou need to find is this one :
    <div id="MYCHARTCONTAINERID" class="k-chart" style="height: 300px; position: relative;" data-role="chart">

    - Then simulate the getsvgcontent Telerik function like that :

     <asp:HiddenField runat="server" ID="svgHolder" />
        <asp:HiddenField runat="server" ID="svgHolderHeight" />
        <asp:HiddenField runat="server" ID="svgHolderWidth" />

     function getSvgContent(sender) {
                    //obtain an SVG version of the chart regardless of the browser
                   
                    $telerik.$('#svgExportHolder').html(''); // clear the svgExportHolder div
                    var toto = $telerik.$("#MYCHARTCONTAINERID").html() // find the svg html of your chart
                    $telerik.$('#svgExportHolder').append(toto); // put the previous html in your hidden div for string manipulation
                    $telerik.$('#svgExportHolder').find('.k-tooltip').first().remove(); // remove the '.k-tooltip' class div which is useless
                    var temp1 = $telerik.$('#svgExportHolder').html()
                    var temp2 = temp1.replace(/"/g, "'"); // replace double quote by single quote
                    $get("<%=svgHolder.ClientID %>").value = encodeURIComponent(temp2); // encode the string and put it in the hidden div
                    $get("<%=svgHolderHeight.ClientID%>").value = $telerik.$("#MYCHARTCONTAINERID svg").height() // get your chart height
                    $get("<%=svgHolderWidth.ClientID %>").value = $telerik.$("#MYCHARTCONTAINERID svg").width() // get your chart width
                   
                    __doPostBack(sender.name, "");

                }

    Refer to ExportRadHtmlChart-CS.zip for the server side code

    Arnaud

  24. 7139E256-95FF-431E-9493-9F1BB746FDC4
    7139E256-95FF-431E-9493-9F1BB746FDC4 avatar
    23 posts
    Member since:
    Feb 2012

    Posted 25 Feb 2014 in reply to D39D89CA-331E-4BDC-B2DE-757BAB1AE3BC Link to this post

    Hey guys.

    I've managed to sucessfully implement a solution using this library:
    https://github.com/vvvv/SVG

    The advantage, as I see it, is that I don't have to install anything on the server and I dont have to work with temporary files:

    A simple working example :
            [WebMethod]
            public static void MakeImage(string svgString)
            {
                System.Xml.XmlDocument xmlDoc = new System.Xml.XmlDocument();
                xmlDoc.LoadXml(svgString);
                SvgDocument svgDoc = SvgDocument.Open(xmlDoc);

                svgDoc.Transforms = new SvgTransformCollection();
                svgDoc.Transforms.Add(new SvgScale(1, 1));
                svgDoc.Width = new SvgUnit(svgDoc.Width.Type, svgDoc.Width );
                svgDoc.Height = new SvgUnit(svgDoc.Height.Type, svgDoc.Height);
                svgDoc.Draw().Save("D:\\test.gif");
            }

    In this server-side, example i get the chart-SVG data from the JavaScript function RadHtmlChart.getSVGString() and pass it to my pagemethod.

    As you see I just load it into an xmldocument, create a svgDocument object (with the control mentioned above), and render it to a System.Drawing.Bitmap (which I save to a .gif for testing only).





  25. 7AE61E9F-C89D-463D-8D4D-AFA966C758E7
    7AE61E9F-C89D-463D-8D4D-AFA966C758E7 avatar
    5 posts
    Member since:
    Mar 2014

    Posted 31 Mar 2014 in reply to 7139E256-95FF-431E-9493-9F1BB746FDC4 Link to this post

    hi
    can you give me javascript function to get "string svgString"
    thanks in advance
  26. 7AE61E9F-C89D-463D-8D4D-AFA966C758E7
    7AE61E9F-C89D-463D-8D4D-AFA966C758E7 avatar
    5 posts
    Member since:
    Mar 2014

    Posted 31 Mar 2014 in reply to 7139E256-95FF-431E-9493-9F1BB746FDC4 Link to this post

    hi
    can you give me javascript function to get "string svgString"
    thanks in advance
  27. 7139E256-95FF-431E-9493-9F1BB746FDC4
    7139E256-95FF-431E-9493-9F1BB746FDC4 avatar
    23 posts
    Member since:
    Feb 2012

    Posted 31 Mar 2014 in reply to 7AE61E9F-C89D-463D-8D4D-AFA966C758E7 Link to this post

    Ofcourse.

    As i mention in my post, RadHtmlChart exposes the javascript method RadHtmlChart.getSVGString(), which returns a string.

    Its that string that I parse directly to my webmethod
  28. 9915F819-5226-40CF-90E0-E07E884605ED
    9915F819-5226-40CF-90E0-E07E884605ED avatar
    1502 posts
    Member since:
    Jan 2017

    Posted 01 Apr 2014 Link to this post

    Hi Kishan,

    In order to obtain the SVG string of the chart you must reference the chart object and then call its getSVGString() method. For example:
    JavaScript:
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script>
            function OnClientClicked(sender, args) {
                var chart = $find("<%=RadHtmlChart1.ClientID%>");
                alert(chart.getSVGString());
            }
        </script>
    </telerik:RadCodeBlock>
    ASPX:
    <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600px" Height="400px">
        <PlotArea>
            <Series>
                <telerik:LineSeries>
                    <SeriesItems>
                        <telerik:CategorySeriesItem Y="30" />
                        <telerik:CategorySeriesItem Y="10" />
                        <telerik:CategorySeriesItem Y="20" />
                    </SeriesItems>
                </telerik:LineSeries>
            </Series>
        </PlotArea>
    </telerik:RadHtmlChart>
    <telerik:RadButton ID="RadButton1" runat="server" Text="Get SVG String" OnClientClicked="OnClientClicked" AutoPostBack="false" />

    You may also find useful the Client-side API help article.

    Regards,
    Danail Vasilev
    Telerik
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

     
  29. 3800860D-52C4-4006-918E-FFED37C83364
    3800860D-52C4-4006-918E-FFED37C83364 avatar
    4 posts
    Member since:
    Aug 2010

    Posted 11 May 2014 Link to this post

    Hello, i have a question, how i do to export to jpg format when forms load, and then close the form automatically.

    Thanks,

    Regards
  30. 3800860D-52C4-4006-918E-FFED37C83364
    3800860D-52C4-4006-918E-FFED37C83364 avatar
    4 posts
    Member since:
    Aug 2010

    Posted 11 May 2014 in reply to 3800860D-52C4-4006-918E-FFED37C83364 Link to this post

    I'm using Visual Studio 2012
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.