Range Radar Area

  • 4 minutes to read

Range Radar Area belongs to the Radar Series group. To display this series, use the RadarRangeAreaSeries2D class.

Range Radar Area shows data as a filled area on a circular grid. This series requires two values for each series point to specify range limits.

Series Type Characteristics

The table below lists the main characteristics of a series:

Feature Value
Series View RadarRangeAreaSeries2D
Diagram RadarDiagram2D
Number of arguments per series point 1
Number of values per series point 2
NOTE

Refer to the Series Type Compatibility article for information about compatible series.

Specify Series Data

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