New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Export RadHtmlChart

You could easily export the RadHtmlChart control with the RadClientExportManager to PDF (as shown in the demo) and to an image. You can also use the skin chooser to change the appearance of the component and export the new appearance.

Known Limitations:
The exporting functionality does not work out of the box in IE version 9 and lower and Safari, because RadClientExportManager relies on the File API in order to work and the mentioned browsers do not support File API. You can use a proxy that streams the file to the end user in these scenarios, as explained in the IE9 and Safari Compatibility help article.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="ClientExportManager.ApplicationScenarios.HtmlChart.DefaultCS"Language="c#"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
     <!-- Load Pako ZLIB library to enable PDF compression -->
    <script src="../../../Common/Scripts/pako.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-wide">
        <telerik:RadButton RenderMode="Lightweight" runat="server" OnClientClicked="exportRadHtmlChart" Text="Export RadHtmlChart to PDF" AutoPostBack="false" UseSubmitBehavior="false"></telerik:RadButton>
        <telerik:RadClientExportManager runat="server" ID="RadClientExportManager1">
        </telerik:RadClientExportManager>
          <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="800px" Height="500px">
            <PlotArea>
                <XAxis Type="Log">
                    <TitleAppearance Text="Frequency (Hz)"></TitleAppearance>
                </XAxis>
                <Series>
                    <telerik:ScatterLineSeries DataFieldY="SoundPressureLevel" DataFieldX="Frequency" Name="20 phon">
                        <LineAppearance LineStyle="Smooth" />
                        <LabelsAppearance Visible="false"></LabelsAppearance>
                        <MarkersAppearance Size="4" />
                    </telerik:ScatterLineSeries>
                </Series>
                <YAxis>
                    <TitleAppearance Text="Sound Pressure Level (dB)"></TitleAppearance>
                </YAxis>
            </PlotArea>
            <ChartTitle Text="Equal-Loudness Contour">
            </ChartTitle>
        </telerik:RadHtmlChart>
    </div>
    <script>
        var $ = $telerik.$;

        function exportRadHtmlChart() {
            $find('<%=RadClientExportManager1.ClientID%>').exportPDF($(".RadHtmlChart"));
        }

    </script>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance