Skip to main content

RadarRangeAreaSeries2D Class

The Radar Range Area series.

Namespace: DevExpress.Xpf.Charts

Assembly: DevExpress.Xpf.Charts.v24.1.dll

NuGet Package: DevExpress.Wpf.Charts

Declaration

public class RadarRangeAreaSeries2D :
    CircularRangeAreaSeries2D

Remarks

This series displays data as a filled area on a circular grid and requires two values for each series point.

You can add Radar Range Area Series to a diagram of the RadarDiagram2D type.

Manually Add Points

You can populate the Series.Points collection manually. Note that the Series.Points is a content property. You can declare points in XAML directly after the RadarRangeAreaSeries2D declaration. You do not need to wrap them in the opening and closing Series.Points tags.

Specify the following properties for each series point:

<dxc:RadarRangeAreaSeries2D...>
   <dxc:SeriesPoint
       Argument="01/01/2001"
       Value="6"
       dxc:RadarRangeAreaSeries2D.Value2="2" />
   ...
</dxc:RadarRangeAreaSeries2D>
Show the complete example
<dxc:ChartControl
 Name="chart"
 ToolTipEnabled="True">
 <dxc:RadarDiagram2D
     StartAngle="0"
     ShapeStyle="Polygon"
     RotationDirection="Clockwise">
     <!--#region Axes-->
     <dxc:RadarDiagram2D.AxisX>
         <dxc:RadarAxisX2D>
             <dxc:RadarAxisX2D.DateTimeScaleOptions>
                 <dxc:ManualDateTimeScaleOptions
                     MeasureUnit="Month"
                     GridAlignment="Month" />
             </dxc:RadarAxisX2D.DateTimeScaleOptions>
             <dxc:RadarAxisX2D.Label>
                 <dxc:AxisLabel
                     TextPattern="{}{A:MMMM}" />
             </dxc:RadarAxisX2D.Label>
         </dxc:RadarAxisX2D>
     </dxc:RadarDiagram2D.AxisX>
     <dxc:RadarDiagram2D.AxisY>
         <dxc:RadarAxisY2D
             TickmarksMinorVisible="False"
             TickmarksVisible="False"
             Thickness="0">
             <dxc:RadarAxisY2D.Label>
                 <dxc:AxisLabel
                     TextPattern="{}{V}°C" />
             </dxc:RadarAxisY2D.Label>
         </dxc:RadarAxisY2D>
     </dxc:RadarDiagram2D.AxisY>
     <!--#endregion-->
     <dxc:RadarRangeAreaSeries2D
         x:Name="series"
         Transparency="0.6"
         ToolTipPointPattern=" {A:MMMM}: {V2:0.00}°C - {V1:0.00}°C"
         DisplayName="Day-Night"
         Marker1Visible="True"
         Marker2Visible="True">
         <dxc:RadarRangeAreaSeries2D.Border2>
             <dxc:SeriesBorder
                 Brush="#FF1BAE49" />
         </dxc:RadarRangeAreaSeries2D.Border2>
         <dxc:RadarRangeAreaSeries2D.Border1>
             <dxc:SeriesBorder
                 Brush="#FFD80079" />
         </dxc:RadarRangeAreaSeries2D.Border1>
         <dxc:RadarRangeAreaSeries2D.Label>
             <dxc:SeriesLabel
                 dxc:CircularRangeAreaSeries2D.LabelKind="OneLabel"
                 Visible="True"
                 Indent="15"
                 ResolveOverlappingMode="Default" />
         </dxc:RadarRangeAreaSeries2D.Label>
         <!--#region Points-->
         <dxc:SeriesPoint
             Argument="01/01/2001"
             Value="6"
             dxc:RadarRangeAreaSeries2D.Value2="2" />
         <dxc:SeriesPoint
             Argument="02/01/2001"
             Value="7"
             dxc:RadarRangeAreaSeries2D.Value2="2" />
         <dxc:SeriesPoint
             Argument="03/01/2001"
             Value="10"
             dxc:RadarRangeAreaSeries2D.Value2="3" />
         <dxc:SeriesPoint
             Argument="04/01/2001"
             Value="14"
             dxc:RadarRangeAreaSeries2D.Value2="5" />
         <dxc:SeriesPoint
             Argument="05/01/2001"
             Value="18"
             dxc:RadarRangeAreaSeries2D.Value2="8" />
         <dxc:SeriesPoint
             Argument="06/01/2001"
             Value="21"
             dxc:RadarRangeAreaSeries2D.Value2="11" />
         <dxc:SeriesPoint
             Argument="07/01/2001"
             Value="22"
             dxc:RadarRangeAreaSeries2D.Value2="13" />
         <dxc:SeriesPoint
             Argument="08/01/2001"
             Value="23"
             dxc:RadarRangeAreaSeries2D.Value2="13" />
         <dxc:SeriesPoint
             Argument="09/01/2001"
             Value="19"
             dxc:RadarRangeAreaSeries2D.Value2="11" />
         <dxc:SeriesPoint
             Argument="10/01/2001"
             Value="15"
             dxc:RadarRangeAreaSeries2D.Value2="8" />
         <dxc:SeriesPoint
             Argument="11/01/2001"
             Value="10"
             dxc:RadarRangeAreaSeries2D.Value2="5" />
         <dxc:SeriesPoint
             Argument="12/01/2001"
             Value="7"
             dxc:RadarRangeAreaSeries2D.Value2="3" />
         <!--#endregion-->
     </dxc:RadarRangeAreaSeries2D>
 </dxc:RadarDiagram2D>
 <!--#region Legend-->
 <dxc:ChartControl.Legend>
     <dxc:Legend
         HorizontalPosition="Right"
         VerticalPosition="TopOutside" />
 </dxc:ChartControl.Legend>
 <!--#endregion-->
 <!--#region Title-->
 <dxc:ChartControl.Titles>
     <dxc:Title
         HorizontalAlignment="Center">Average temperature in London</dxc:Title>
 </dxc:ChartControl.Titles>
 <!--#endregion-->
</dxc:ChartControl>

Bind to a Data Source

To populate Radar Range Area Series with data from a data source, specify the following properties:

<dxc:RadarRangeAreaSeries2D ...
    DataSource="{Binding Data}" 
    ArgumentDataMember="Argument"
    ValueDataMember="Value"
    Value2DataMember="Value2">
     ...
</dxc:RadarRangeAreaSeries2D>
Show the complete example
<Window
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts"
       x:Class="SplineChart.MainWindow"
       xmlns:local="clr-namespace:SplineChart"
       Title="Spline Chart" Height="440" Width="660">
   <Window.DataContext>
       <local:ChartViewModel/>
   </Window.DataContext>
   <Grid>
       <dxc:ChartControl 
           Name="chart"
           ToolTipEnabled="True">
           <dxc:RadarDiagram2D 
               StartAngle="0"
               ShapeStyle="Polygon"
               RotationDirection="Clockwise">
               <!--#region Axes-->
               <dxc:RadarDiagram2D.AxisX>
                   <dxc:RadarAxisX2D>
                       <dxc:RadarAxisX2D.DateTimeScaleOptions>
                           <dxc:ManualDateTimeScaleOptions
                               MeasureUnit="Month"
                               GridAlignment="Month" />
                       </dxc:RadarAxisX2D.DateTimeScaleOptions>
                       <dxc:RadarAxisX2D.Label>
                           <dxc:AxisLabel
                               TextPattern="{}{A:MMMM}" />
                       </dxc:RadarAxisX2D.Label>
                   </dxc:RadarAxisX2D>
               </dxc:RadarDiagram2D.AxisX>
               <dxc:RadarDiagram2D.AxisY>
                   <dxc:RadarAxisY2D
                       TickmarksMinorVisible="False"
                       TickmarksVisible="False"
                       Thickness="0">
                       <dxc:RadarAxisY2D.Label>
                           <dxc:AxisLabel
                               TextPattern="{}{V}°C" />
                       </dxc:RadarAxisY2D.Label>
                   </dxc:RadarAxisY2D>
               </dxc:RadarDiagram2D.AxisY>
               <!--#endregion-->
               <dxc:RadarRangeAreaSeries2D
                   x:Name="series"
                   DataSource="{Binding Data}" 
                   ArgumentDataMember="Argument"
                   ValueDataMember="Value"
                   Value2DataMember="Value2"
                   Transparency="0.6"
                   ToolTipPointPattern=" {A:MMMM}: {V2:0.00}°C - {V1:0.00}°C"
                   DisplayName="Day-Night"
                   Marker1Visible="True"
                   Marker2Visible="True">
                   <dxc:RadarRangeAreaSeries2D.Border2>
                       <dxc:SeriesBorder
                           Brush="#FF1BAE49" />
                   </dxc:RadarRangeAreaSeries2D.Border2>
                   <dxc:RadarRangeAreaSeries2D.Border1>
                       <dxc:SeriesBorder
                           Brush="#FFD80079" />
                   </dxc:RadarRangeAreaSeries2D.Border1>
                   <dxc:RadarRangeAreaSeries2D.Label>
                       <dxc:SeriesLabel
                           dxc:CircularRangeAreaSeries2D.LabelKind="OneLabel"
                           Visible="True"
                           Indent="15"
                           ResolveOverlappingMode="Default" />
                   </dxc:RadarRangeAreaSeries2D.Label>
               </dxc:RadarRangeAreaSeries2D>
           </dxc:RadarDiagram2D>
           <!--#region Legend-->
           <dxc:ChartControl.Legend>
               <dxc:Legend
                   HorizontalPosition="Right"
                   VerticalPosition="TopOutside" />
           </dxc:ChartControl.Legend>
           <!--#endregion-->
           <!--#region Title-->
           <dxc:ChartControl.Titles>
               <dxc:Title
                   HorizontalAlignment="Center">Average temperature in London</dxc:Title>
           </dxc:ChartControl.Titles>
           <!--#endregion-->
       </dxc:ChartControl>
   </Grid>
</Window>
public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
        }
}
public class ChartViewModel {
    public ObservableCollection<DataPoint> Data { get; private set; }
    public ChartViewModel() {
        Data = new ObservableCollection<DataPoint> {
                    new DataPoint (new DateTime(2001,1,1),6,2),
                    new DataPoint (new DateTime(2001,2,1),7,2),
                    new DataPoint (new DateTime(2001,3,1),10,3),
                    new DataPoint (new DateTime(2001,4,1),14,5),
                    new DataPoint (new DateTime(2001,5,1),18,8),
                    new DataPoint (new DateTime(2001,6,1),21,11),
                    new DataPoint (new DateTime(2001,7,1),22,13),
                    new DataPoint (new DateTime(2001,8,1),23,13),
                    new DataPoint (new DateTime(2001,9,1),19,11),
                    new DataPoint (new DateTime(2001,10,1),15,8),
                    new DataPoint (new DateTime(2001,11,1),10,5),
                    new DataPoint (new DateTime(2001,12,1),7,3),
        };
    }
}
public class DataPoint {
    public DateTime Argument { get; set; }
    public int Value { get; set; }
    public int Value2 { get; set; }
    public DataPoint(DateTime argument, int value, int value2) {
        Argument = argument;
        Value = value;
        Value2 = value2;
    }
}
See Also