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

Chart Printing

Printing ultimately relies on the browser's printing engine. This ASP.NET AJAX Chart demo only shows one possible way to hide the rest of the page in order to print only the selected chart by using CSS3 print @media Query (not supported in IE8 and below). How the browser will print the rest of the page cannot be fully controlled by the developer. Should printing be expected the page should be designed to be printer-friendly (i.e. reduce background images, overall page length, etc.) to minimize unwanted artifacts in the printed page. Generally, the simpler the page, the better it will print.

Printing in this manner may be necessary because of the interactive nature of the control - it renders SVG or VML images that cannot be saved directly by the browser like static images (e.g. png or jpg) can.

NOTE: At present time (12th of May, 2014) Safari has a bug with printing gradient images that affects the RadHtmlChart as it utilizes them heavily. This means that under Safari the RadHtmlChart will not print properly until they apply the fix for this problem that already exists in the WebKit core and Chrome. The issue can be tracked in this URL.

Move the mouse over the chart and the Print button will appear in the top left corner. Clicking it will have the browser print the chart only.

  • DefaultCS.aspx
  • scripts.js
  • styles.css
<%@ Page Language="C#"  %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <script type="text/javascript" src="scripts.js"></script>
    <div class="demo-containers">
        <div class="demo-container">
            <telerik:RadButton RenderMode="Lightweight" runat="server" ID="rbPrintLeft" Text="Print this chart" AutoPostBack="false"
                OnClientClicked="telerikDemo.printChartOnly" CssClass="PrintButton">
                <Icon PrimaryIconCssClass="rbPrint"></Icon>
            </telerik:RadButton>
            <telerik:RadHtmlChart ID="chartWeeklyVisits" runat="server" Width="350" Height="550">
                <ChartTitle Text="Home page visits per week">
                </ChartTitle>
                <Legend>
                    <Appearance Position="Bottom" />
                </Legend>
                <PlotArea>
                    <Series>
                        <telerik:LineSeries Name="June 2012">
                            <LabelsAppearance DataFormatString="{0} visits">
                            </LabelsAppearance>
                            <TooltipsAppearance Visible="false"></TooltipsAppearance>
                            <MarkersAppearance MarkersType="Circle"></MarkersAppearance>
                            <SeriesItems>
                                <telerik:CategorySeriesItem Y="23"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="27"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="13"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="33"></telerik:CategorySeriesItem>
                            </SeriesItems>
                        </telerik:LineSeries>
                        <telerik:LineSeries Name="July 2012">
                            <LabelsAppearance DataFormatString="{0} visits">
                            </LabelsAppearance>
                            <TooltipsAppearance Visible="false"></TooltipsAppearance>
                            <MarkersAppearance MarkersType="Circle"></MarkersAppearance>
                            <SeriesItems>
                                <telerik:CategorySeriesItem Y="50"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="35"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="42"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="39"></telerik:CategorySeriesItem>
                            </SeriesItems>
                        </telerik:LineSeries>
                        <telerik:LineSeries Name="August 2012">
                            <LabelsAppearance DataFormatString="{0} visits">
                            </LabelsAppearance>
                            <TooltipsAppearance Visible="false"></TooltipsAppearance>
                            <MarkersAppearance MarkersType="Circle"></MarkersAppearance>
                            <SeriesItems>
                                <telerik:CategorySeriesItem Y="63"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="47"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="55"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="61"></telerik:CategorySeriesItem>
                            </SeriesItems>
                        </telerik:LineSeries>
                    </Series>
                    <XAxis>
                        <LabelsAppearance DataFormatString="Week {0}">
                        </LabelsAppearance>
                        <MajorGridLines Visible="false"></MajorGridLines>
                        <MinorGridLines Visible="false"></MinorGridLines>
                        <TitleAppearance Text="Week of the month">
                        </TitleAppearance>
                        <Items>
                            <telerik:AxisItem LabelText="1"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="2"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="3"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="4"></telerik:AxisItem>
                        </Items>
                    </XAxis>
                    <YAxis>
                        <MinorGridLines Visible="false"></MinorGridLines>
                        <TitleAppearance Text="Number of visits">
                        </TitleAppearance>
                    </YAxis>
                </PlotArea>
            </telerik:RadHtmlChart>
        </div>
        <div class="demo-container">
            <telerik:RadButton RenderMode="Lightweight" runat="server" ID="rbPrintRight" Text="Print this chart" AutoPostBack="false"
                OnClientClicked="telerikDemo.printChartOnly" CssClass="PrintButton">
                <Icon PrimaryIconCssClass="rbPrint"></Icon>
            </telerik:RadButton>
            <telerik:RadHtmlChart ID="chartQuarterlyVisits" runat="server" Width="350" Height="550">
                <ChartTitle Text="Page visits per quarter">
                </ChartTitle>
                <Legend>
                    <Appearance Position="Bottom" />
                </Legend>
                <PlotArea>
                    <Series>
                        <telerik:LineSeries Name="Home page">
                            <LabelsAppearance DataFormatString="{0} visits">
                            </LabelsAppearance>
                            <TooltipsAppearance Visible="false"></TooltipsAppearance>
                            <MarkersAppearance MarkersType="Circle"></MarkersAppearance>
                            <SeriesItems>
                                <telerik:CategorySeriesItem Y="380"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="488"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="303"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="408"></telerik:CategorySeriesItem>
                            </SeriesItems>
                        </telerik:LineSeries>
                        <telerik:LineSeries Name="About Us page">
                            <LabelsAppearance DataFormatString="{0} visits">
                            </LabelsAppearance>
                            <TooltipsAppearance Visible="false"></TooltipsAppearance>
                            <MarkersAppearance MarkersType="Circle"></MarkersAppearance>
                            <SeriesItems>
                                <telerik:CategorySeriesItem Y="150"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="135"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="202"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="309"></telerik:CategorySeriesItem>
                            </SeriesItems>
                        </telerik:LineSeries>
                        <telerik:LineSeries Name="Contacts page">
                            <LabelsAppearance DataFormatString="{0} visits">
                            </LabelsAppearance>
                            <TooltipsAppearance Visible="false"></TooltipsAppearance>
                            <MarkersAppearance MarkersType="Circle"></MarkersAppearance>
                            <SeriesItems>
                                <telerik:CategorySeriesItem Y="63"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="47"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="55"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="81"></telerik:CategorySeriesItem>
                            </SeriesItems>
                        </telerik:LineSeries>
                    </Series>
                    <XAxis>
                        <LabelsAppearance DataFormatString="Q{0}">
                        </LabelsAppearance>
                        <MajorGridLines Visible="false"></MajorGridLines>
                        <MinorGridLines Visible="false"></MinorGridLines>
                        <TitleAppearance Text="Quarter">
                        </TitleAppearance>
                        <Items>
                            <telerik:AxisItem LabelText="1"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="2"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="3"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="4"></telerik:AxisItem>
                        </Items>
                    </XAxis>
                    <YAxis>
                        <MinorGridLines Visible="false"></MinorGridLines>
                        <TitleAppearance Text="Number of visits">
                        </TitleAppearance>
                    </YAxis>
                </PlotArea>
            </telerik:RadHtmlChart>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance