Skip to main content

How to: Create a 2D Radar Point Chart

The following example demonstrates how to create a 2D Radar Point chart.

To do this, it is necessary to assign the ChartControl.Diagram property to RadarDiagram2D, and then add two RadarPointSeries2D objects with points to the radar diagram Diagram.Series collection.

<Window x:Class="RadarPointSeries2D.MainWindow"
        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"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <dxc:ChartControl EnableAnimation="True" ToolTipEnabled="True">
            <dxc:ChartControl.Diagram>
                <dxc:RadarDiagram2D>
                    <dxc:RadarDiagram2D.Series>
                        <dxc:RadarPointSeries2D  DisplayName="Night" ArgumentScaleType="DateTime">
                            <dxc:RadarPointSeries2D.Points>
                                <dxc:SeriesPoint Argument="1/1/2010" Value="2"/>
                                <dxc:SeriesPoint Argument="2/1/2010" Value="2"/>
                                <dxc:SeriesPoint Argument="3/1/2010" Value="3"/>
                                <dxc:SeriesPoint Argument="4/1/2010" Value="5"/>
                                <dxc:SeriesPoint Argument="5/1/2010" Value="8"/>
                                <dxc:SeriesPoint Argument="6/1/2010" Value="11"/>
                                <dxc:SeriesPoint Argument="7/1/2010" Value="13"/>
                                <dxc:SeriesPoint Argument="8/1/2010" Value="13"/>
                                <dxc:SeriesPoint Argument="9/1/2010" Value="11"/>
                                <dxc:SeriesPoint Argument="10/1/2010" Value="8"/>
                                <dxc:SeriesPoint Argument="11/1/2010" Value="5"/>
                                <dxc:SeriesPoint Argument="12/1/2010" Value="3"/>
                            </dxc:RadarPointSeries2D.Points>
                        </dxc:RadarPointSeries2D>
                        <dxc:RadarPointSeries2D DisplayName="Day" ArgumentScaleType="DateTime">
                            <dxc:RadarPointSeries2D.Points>
                                <dxc:SeriesPoint Argument="1/1/2010" Value="6"/>
                                <dxc:SeriesPoint Argument="2/1/2010" Value="7"/>
                                <dxc:SeriesPoint Argument="3/1/2010" Value="10"/>
                                <dxc:SeriesPoint Argument="4/1/2010" Value="14"/>
                                <dxc:SeriesPoint Argument="5/1/2010" Value="18"/>
                                <dxc:SeriesPoint Argument="6/1/2010" Value="21"/>
                                <dxc:SeriesPoint Argument="7/1/2010" Value="22"/>
                                <dxc:SeriesPoint Argument="8/1/2010" Value="22"/>
                                <dxc:SeriesPoint Argument="9/1/2010" Value="19"/>
                                <dxc:SeriesPoint Argument="10/1/2010" Value="15"/>
                                <dxc:SeriesPoint Argument="11/1/2010" Value="10"/>
                                <dxc:SeriesPoint Argument="12/1/2010" Value="7"/>
                            </dxc:RadarPointSeries2D.Points>
                        </dxc:RadarPointSeries2D>
                    </dxc:RadarDiagram2D.Series>
                    <dxc:RadarDiagram2D.AxisX>
                        <dxc:RadarAxisX2D DateTimeGridAlignment="Month"
                                      DateTimeMeasureUnit="Month">
                            <dxc:RadarAxisX2D.DateTimeOptions>
                                <dxc:DateTimeOptions Format="Custom" FormatString="MMMM" />
                            </dxc:RadarAxisX2D.DateTimeOptions>
                        </dxc:RadarAxisX2D>
                    </dxc:RadarDiagram2D.AxisX>
                    <dxc:RadarDiagram2D.AxisY>
                        <dxc:RadarAxisY2D TickmarksMinorVisible="False" 
                                      TickmarksVisible="False" Thickness="0"/>
                    </dxc:RadarDiagram2D.AxisY>
                </dxc:RadarDiagram2D>
            </dxc:ChartControl.Diagram>
        </dxc:ChartControl>
    </Grid>
</Window>