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

Column Chart


Telerik RadPdfProcessing provides easy to use API which allows both code and image generation of PDF documents. This example demonstrates how to create a document containing RadHtmlChart control by rendering it as an image, generated by the canvas object of the control.

Note: You can use this approach only in the modern browsers that support the Canvas object (Mozilla, Chrome, Opera, IE9+).

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • scripts.js
  • styles.css
<%@ Page Language="vb" CodeFile="DefaultVB.aspx.vb" AutoEventWireup="false" Inherits="Telerik.PdfProcessing.ColumnChart.DefaultVB" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!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>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <script src="scripts.js"></script>
    <div class="demo-container size-medium no-bg">
        <asp:Image ID="abCompanyLogo" runat="server" src="../SampleData/abCompany.jpg" />
        <telerik:RadHtmlChart runat="server" ID="ColumnChart1" Transitions="true" Width="600px" Height="360px">
            <Appearance FillStyle-BackgroundColor="White"></Appearance>
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries Name="Product1" DataFieldY="P1">
                        <Appearance FillStyle-BackgroundColor="#2ECC71"></Appearance>
                        <LabelsAppearance Visible="false"></LabelsAppearance>
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries Name="Product2" DataFieldY="P2">
                        <Appearance FillStyle-BackgroundColor="#9B59B6"></Appearance>
                        <LabelsAppearance Visible="false"></LabelsAppearance>
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries Name="Product3" DataFieldY="P3">
                        <Appearance FillStyle-BackgroundColor="#3498DB"></Appearance>
                        <LabelsAppearance Visible="false"></LabelsAppearance>
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries Name="Product4" DataFieldY="P4">
                        <Appearance FillStyle-BackgroundColor="#F1C40F"></Appearance>
                        <LabelsAppearance Visible="false"></LabelsAppearance>
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries Name="Product5" DataFieldY="P5">
                        <Appearance FillStyle-BackgroundColor="#E67E22"></Appearance>
                        <LabelsAppearance Visible="false"></LabelsAppearance>
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries Name="Product6" DataFieldY="P6">
                        <Appearance FillStyle-BackgroundColor="#E74C3C"></Appearance>
                        <LabelsAppearance Visible="false"></LabelsAppearance>
                    </telerik:ColumnSeries>
                </Series>
                <XAxis MajorTickType="None" MinorTickType="None" DataLabelsField="Name">
                    <Items>
                        <telerik:AxisItem LabelText="1" />
                        <telerik:AxisItem LabelText="2" />
                        <telerik:AxisItem LabelText="3" />
                        <telerik:AxisItem LabelText="4" />
                    </Items>
                    <LabelsAppearance DataFormatString="Q{0}" RotationAngle="0" />
                    <MinorGridLines Visible="false" />
                    <MajorGridLines Visible="false" />
                </XAxis>
                <YAxis MajorTickType="None" MinorTickType="None" Color="Transparent"
                    MaxValue="30000">
                    <LabelsAppearance DataFormatString="${0:N2}" RotationAngle="0" Color="Black" />
                    <TitleAppearance Position="Center" RotationAngle="0" />
                    <MinorGridLines Visible="false" />
                    <MajorGridLines Visible="false" />
                </YAxis>
            </PlotArea>
            <ChartTitle Text="2013">
                <Appearance>
                    <TextStyle Bold="true" />
                </Appearance>
            </ChartTitle>
            <Legend>
                <Appearance Position="Top" />
            </Legend>
        </telerik:RadHtmlChart>
        <br />
        <telerik:RadButton RenderMode="Lightweight" Text="Download Document" ID="Button1" OnClick="Button1_Click" runat="server" OnClientClicked="exportChart" />
    </div>
    <asp:HiddenField ID="chartData" runat="server" />
    <script type="text/javascript">
        //<![CDATA[
        $chartPdfProcDemo.chartID = "<%= ColumnChart1.ClientID %>";
        $chartPdfProcDemo.chartDataID = "<%= chartData.ClientID %>";
        //]]>
    </script>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance