HtmlChart - Polar Chart

Demo Configurator

Polar Area
Polar Line
Polar Scatter
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

The Polar chart shows data in circular plot area in polar coordinates where each data point is represented by a distance/radius and an angle, beginning of the coordinate system. A point's location in the polar coordinate systems is defined by the Value property of the PolarSeriesItem which determines the radial coordinate (the radius) and the Angle property which determines the angular coordinate.

RadHtmlChart supports three types of Polar series. They are only different in the graphical primitives that are drawn. The primitives are a polyline, polygon and point.

  • PolarAreaSeries — in this series type the data points are connected with straight line segments that enclose a filled area together with the chart pole.
  • PolarLineSeries — this series type is represented on the chart as data points connected with straight line segments.
  • PolarScatterSeries — this series type is represented on the chart as non-connected data points.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.HtmlChart.ChartTypes.PolarChart.DefaultCS" %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="Stylesheet" href="Styles.css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-containers">
        <div class="demo-container size-custom">
            <telerik:RadHtmlChart runat="server" ID="PolarAreaChart" Width="400" Height="400" Transitions="true" Skin="Silk">
                <PlotArea>
                    <Series>
                        <telerik:PolarAreaSeries Name=">12.3 knots">
                            <MarkersAppearance Visible="false"></MarkersAppearance>
                            <SeriesItems>
                                <telerik:PolarSeriesItem Angle="125" Radius="2.4"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="138" Radius="7.5"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="152" Radius="8.3"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="166" Radius="4.3"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="180" Radius="2.7"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="194" Radius="8.8"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="208" Radius="11.5"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="222" Radius="9"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="235" Radius="2.2"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="249" Radius="5.8"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="263" Radius="11.8"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="277" Radius="12.3"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="291" Radius="8.2"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="305" Radius="1"></telerik:PolarSeriesItem>
                            </SeriesItems>
                        </telerik:PolarAreaSeries>
                        <telerik:PolarAreaSeries Name=">8.6 knots">
                            <MarkersAppearance Visible="false"></MarkersAppearance>
                            <SeriesItems>
                                <telerik:PolarSeriesItem Angle="125" Radius="1.9"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="138" Radius="5.1"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="152" Radius="5.7"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="166" Radius="3.1"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="180" Radius="1.7"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="194" Radius="6.4"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="208" Radius="8.1"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="222" Radius="6.5"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="235" Radius="1.7"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="249" Radius="4.2"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="263" Radius="8.2"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="277" Radius="8.6"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="291" Radius="5.6"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="305" Radius="0.9"></telerik:PolarSeriesItem>
                            </SeriesItems>
                        </telerik:PolarAreaSeries>
                        <telerik:PolarAreaSeries Name=">6.2 knots">
                            <MarkersAppearance Visible="false"></MarkersAppearance>
                            <SeriesItems>
                                <telerik:PolarSeriesItem Angle="125" Radius="1.3"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="138" Radius="3.6"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="152" Radius="4"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="166" Radius="2.2"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="180" Radius="1.3"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="194" Radius="4.5"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="208" Radius="5.8"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="222" Radius="4.6"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="235" Radius="1.1"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="249" Radius="3"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="263" Radius="5.8"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="277" Radius="6.2"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="291" Radius="4.1"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="305" Radius="0.4"></telerik:PolarSeriesItem>
                            </SeriesItems>
                        </telerik:PolarAreaSeries>
                    </Series>
                    <XAxis Color="#b3b3b3" Reversed="false" Step="30" StartAngle="90">
                        <LabelsAppearance RotationAngle="0" DataFormatString="{0}&#176;">
                        </LabelsAppearance>
                        <MajorGridLines Width="1"></MajorGridLines>
                        <MinorGridLines Visible="false"></MinorGridLines>
                    </XAxis>
                    <YAxis Visible="false">
                        <MajorGridLines Width="1"></MajorGridLines>
                        <MinorGridLines Visible="false"></MinorGridLines>
                    </YAxis>
                </PlotArea>
                <ChartTitle Text="Wind Rose Plot of Nighttime Peak Winds">
                    <Appearance Align="Center" Position="Top">
                    </Appearance>
                </ChartTitle>
                <Legend>
                    <Appearance Visible="true" Position="Bottom">
                    </Appearance>
                </Legend>
            </telerik:RadHtmlChart>
        </div>
        <div class="demo-container size-custom">
            <telerik:RadHtmlChart runat="server" ID="PolarLineChart" Width="400" Height="400" Transitions="true" Skin="Silk">
                <PlotArea>
                    <Series>
                        <telerik:PolarLineSeries Name="Antenna">
                            <TooltipsAppearance Color="#ffffff"></TooltipsAppearance>
                            <SeriesItems>
                                <telerik:PolarSeriesItem Angle="0" Radius="0"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="10" Radius="0"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="20" Radius="0"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="30" Radius="-1"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="40" Radius="-2"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="50" Radius="-3"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="60" Radius="-5"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="70" Radius="-7"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="80" Radius="-10"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="90" Radius="-13"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="100" Radius="-16"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="110" Radius="-20"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="250" Radius="-20"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="260" Radius="-16"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="270" Radius="-13"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="280" Radius="-10"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="290" Radius="-7"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="300" Radius="-5"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="310" Radius="-3"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="320" Radius="-2"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="330" Radius="-1"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="340" Radius="0"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="350" Radius="0"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="0" Radius="0"></telerik:PolarSeriesItem>
                            </SeriesItems>
                            <Appearance FillStyle-BackgroundColor="#00adcc"></Appearance>
                            <MarkersAppearance Visible="false"></MarkersAppearance>
                        </telerik:PolarLineSeries>
                    </Series>
                    <XAxis Color="#b3b3b3" Reversed="false" Step="30" StartAngle="90">
                        <LabelsAppearance RotationAngle="0" DataFormatString="{0}&#176;"></LabelsAppearance>
                        <MajorGridLines Width="1"></MajorGridLines>
                        <MinorGridLines Visible="false"></MinorGridLines>
                    </XAxis>
                    <YAxis Color="#b3b3b3" MajorTickSize="1" MajorTickType="Outside" Reversed="false">
                        <LabelsAppearance DataFormatString="{0}dBi" RotationAngle="0" Skip="0" Step="1"></LabelsAppearance>
                        <MajorGridLines Width="1"></MajorGridLines>
                        <MinorGridLines Visible="false"></MinorGridLines>
                    </YAxis>
                </PlotArea>
                <ChartTitle Text="Patch Antenna Directivity Pattern">
                    <Appearance Align="Center" Position="Top">
                    </Appearance>
                </ChartTitle>
                <Legend>
                    <Appearance Visible="false">
                    </Appearance>
                </Legend>
            </telerik:RadHtmlChart>
        </div>
        <div class="demo-container size-custom">
            <telerik:RadHtmlChart runat="server" ID="PolarScatterChart" Width="400" Height="400" Transitions="true" Skin="Silk">
                <PlotArea>
                    <Series>
                        <telerik:PolarScatterSeries Name="Received signal">
                            <Appearance FillStyle-BackgroundColor="#00adcc">
                            </Appearance>
                            <TooltipsAppearance Color="White"></TooltipsAppearance>
                            <SeriesItems>
                                <telerik:PolarSeriesItem Angle="35" Radius="7"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="42" Radius="8"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="47" Radius="5"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="36" Radius="6"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="43" Radius="4"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="51" Radius="6"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="53" Radius="8"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="48" Radius="7"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="60" Radius="7"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="61" Radius="5"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="38" Radius="5"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="32" Radius="5"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="125" Radius="7"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="132" Radius="8"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="137" Radius="5"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="126" Radius="6"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="133" Radius="4"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="141" Radius="6"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="143" Radius="8"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="138" Radius="7"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="150" Radius="7"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="151" Radius="5"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="128" Radius="5"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="122" Radius="5"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="215" Radius="7"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="222" Radius="8"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="227" Radius="5"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="216" Radius="6"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="223" Radius="4"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="231" Radius="6"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="233" Radius="8"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="228" Radius="7"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="240" Radius="7"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="241" Radius="5"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="218" Radius="5"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="212" Radius="5"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="305" Radius="7"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="312" Radius="8"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="317" Radius="5"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="306" Radius="6"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="313" Radius="4"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="321" Radius="6"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="323" Radius="8"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="318" Radius="7"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="330" Radius="7"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="331" Radius="5"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="308" Radius="5"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="302" Radius="5"></telerik:PolarSeriesItem>
                            </SeriesItems>
                        </telerik:PolarScatterSeries>
                        <telerik:PolarScatterSeries Name="Expected signal">
                            <Appearance FillStyle-BackgroundColor="black">
                            </Appearance>
                            <MarkersAppearance BackgroundColor="black" />
                            <TooltipsAppearance Visible="false"></TooltipsAppearance>
                            <SeriesItems>
                                <telerik:PolarSeriesItem Angle="45" Radius="6"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="135" Radius="6"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="225" Radius="6"></telerik:PolarSeriesItem>
                                <telerik:PolarSeriesItem Angle="315" Radius="6"></telerik:PolarSeriesItem>
                            </SeriesItems>
                        </telerik:PolarScatterSeries>
                    </Series>
                    <XAxis Color="#b3b3b3" Reversed="false" Step="30" StartAngle="90">
                        <LabelsAppearance RotationAngle="0" DataFormatString="{0}&#176;">
                        </LabelsAppearance>
                        <MajorGridLines Width="1"></MajorGridLines>
                        <MinorGridLines Visible="false"></MinorGridLines>
                    </XAxis>
                    <YAxis Visible="false" MaxValue="10">
                        <MajorGridLines Width="1"></MajorGridLines>
                        <MinorGridLines Visible="false"></MinorGridLines>
                    </YAxis>
                </PlotArea>
                <ChartTitle Text="QPSK signal constellation">
                    <Appearance Align="Center" Position="Top">
                    </Appearance>
                </ChartTitle>
                <Legend>
                    <Appearance Visible="true" Position="Bottom">
                    </Appearance>
                </Legend>
            </telerik:RadHtmlChart>
        </div>
    </div>
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Skin="Silk">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="AreaStartAngle">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="PolarAreaChart" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="ComboBoxPolarAreaSeriesLineStyle">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="PolarAreaChart" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="LineStartAngle">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="PolarLineChart" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="ComboBoxPolarLineSeriesLineStyle">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="PolarLineChart" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="ScatterStartAngle">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="PolarScatterChart" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>



    <qsf:ConfiguratorPanel ID="Configuratorpanel1" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium" Title="Polar Area">
                    <ul class="fb-group">
                        <li>
                            <qsf:DropDownList runat="server" ID="ComboBoxPolarAreaSeriesLineStyle" AutoPostBack="true" Size="Wide"
                                 Label="Line Style:" />
                            <qsf:NumericTextBox ID="AreaStartAngle" runat="server" AutoPostBack="true" MinValue="-360" MaxValue="360" 
                                MaxLength="4" Value="90" Label="Start Angle:" Size="Narrow" WrapperCssClass="fb-sized">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Medium" Title="Polar Line">
                    <ul class="fb-group">
                        <li>
                            <qsf:DropDownList runat="server" ID="ComboBoxPolarLineSeriesLineStyle" AutoPostBack="true" Size="Wide"
                                 Label="Line Style:" />
                            <qsf:NumericTextBox ID="LineStartAngle" runat="server" AutoPostBack="true" MinValue="-360" MaxValue="360"
                                 MaxLength="4" Value="90" Label="Start Angle:" Size="Narrow" WrapperCssClass="fb-sized">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Size="Medium" Title="Polar Scatter">
                    <ul class="fb-group">
                        <li>
                            <qsf:NumericTextBox ID="ScatterStartAngle" runat="server" AutoPostBack="true" MinValue="-360"
                                 MaxValue="360" MaxLength="4" Value="90" Label="Start Angle:" Size="Narrow" WrapperCssClass="fb-sized">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?