Home / Community & Support / Code Library / ASP.NET AJAX > HtmlChart > Exporting RadHtmlChart to PNG and PDF

• Telerik Admin Master

  Posted on Aug 9, 2012 (permalink)

  Requirements
  RadControls version	Q2 2012 SP2
  .NET version	3.5/4.0
  Visual Studio version	2008/2010
  programming language	C# or VB.NET
  browser support	all browsers supported by RadControls

  
  PROJECT DESCRIPTION                                    
  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 in 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.

  Attached files

  • ExportRadHtmlChart-CS.zip
  • ExportRadHtmlChart-VB.zip

  Reply

• Aakansha

  Posted on Sep 20, 2012 (permalink)

  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
  
  

  Reply

• Marin Bratanov Marin Bratanov

  Posted on Sep 24, 2012 (permalink)

  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.

  Reply

• Qurat

  Posted on Mar 1, 2013 (permalink)

  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 
  

  Reply

• Marin Bratanov Marin Bratanov

  Posted on Mar 4, 2013 (permalink)

  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.

  Reply

• Qurat

  Posted on Mar 12, 2013 (permalink)

  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
  
  

  Attached files

  • contenttemplates.rar

  Reply

• Mark

  Posted on Mar 25, 2013 (permalink)

  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>

  Reply

• Danail Vasilev Danail Vasilev

  Posted on Mar 27, 2013 (permalink)

  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.

  Reply

• Walther Siksma

  Posted on Apr 17, 2013 (permalink)

  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

  Reply

• Marin Bratanov Marin Bratanov

  Posted on Apr 19, 2013 (permalink)

  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.

  Reply

• Walther Siksma

  Posted on Apr 19, 2013 (permalink)

  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
  
  
  

  Reply

• Marin Bratanov Marin Bratanov

  Posted on Apr 23, 2013 (permalink)

  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.

  Reply

Back to Top

Home / Community & Support / Code Library / ASP.NET AJAX > HtmlChart > Exporting RadHtmlChart to PNG and PDF