Radar Chart | Visiblox Gallery
This example shows data being displayed on a radar chart.
Radar charts are a useful way of comparing multi-dimensional data.
This example compares monster trucks with drag racers. It is obvious from the chart that monster trucks are more geared towards durability, whereas drag racers are more about speed.
XAML + CODE +XAML
<UserControl x:Class="Visiblox.Charts.Examples.RadarChart.RadarChartExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:charts="clr-namespace:Visiblox.Charts;assembly=Visiblox.Charts"
mc:Ignorable="d">
<UserControl.Resources>
<Style x:Key="LegendNoBorder" TargetType="charts:Legend">
<Setter Property="BorderThickness" Value="0"/>
</Style>
<Style x:Key="TitleStyle" TargetType="TextBlock">
<Setter Property="FontSize" Value="14"/>
</Style>
<Style x:Key="LabelStyle" TargetType="TextBlock">
<Setter Property="FontSize" Value="13"/>
</Style>
<Style x:Key="LabelLineStyle" TargetType="Path">
<Setter Property="Stroke" Value="LightGray"/>
<Setter Property="StrokeDashArray" Value="2,6"/>
</Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!-- Ultimate Trial users should add 'ValidationKey="ENTER TRIAL LICENSE KEY HERE"' to each Chart declaration. -->
<charts:RadialChart Name="RadarChart"
Width="600" Height="350" YLabelsDistance="100" LegendPosition="OutsideMiddleRight"
LegendStyle="{StaticResource LegendNoBorder}" Title="Comparing Cars" HorizontalAlignment="Center">
<charts:RadialChart.XAxis>
<charts:RadialCategoryAxis LabelStyle="{StaticResource LabelStyle}" />
</charts:RadialChart.XAxis>
<charts:RadialChart.YAxis>
<charts:RadialLinearAxis ShowTitle="True" Title="Score"
TitleStyle="{StaticResource TitleStyle}" LabelStyle="{StaticResource LabelStyle}"
LabelLineStyle="{StaticResource LabelLineStyle}">
<charts:RadialLinearAxis.Range>
<charts:DoubleRange Maximum="10" Minimum="0" />
</charts:RadialLinearAxis.Range>
</charts:RadialLinearAxis>
</charts:RadialChart.YAxis>
<charts:RadialChart.Series>
<charts:RadialLineSeries ShowArea="True" />
<charts:RadialLineSeries ShowArea="True" AreaFill="#FF60B167" LineStroke="#FF60B167" />
</charts:RadialChart.Series>
</charts:RadialChart>
<StackPanel Grid.Row="1" Orientation="Horizontal" Margin="0, 10, 0, 0" HorizontalAlignment="Center">
<TextBlock Text="Drawing Mode:" Margin="0, 0, 5, 0" FontWeight="Bold"/>
<RadioButton GroupName="DrawingGroup" x:Name="Straight" Content="Straight" Margin="0, 0, 5, 0" IsChecked="True" Checked="Straight_Checked" />
<RadioButton GroupName="DrawingGroup" x:Name="Circular" Content="Circular" Checked="Circular_Checked" />
<TextBlock Text="YAxis Labels Position:" Margin="15, 0, 5, 0" FontWeight="Bold"/>
<RadioButton GroupName="PositionGroup" x:Name="Left" Content="Left" Margin="0, 0, 5, 0" IsChecked="True" Checked="Left_Checked" />
<RadioButton GroupName="PositionGroup" x:Name="Center" Content="Center" Checked="Center_Checked" />
<RadioButton GroupName="PositionGroup" x:Name="Right" Content="Right" Checked="Right_Checked" />
</StackPanel>
</Grid>
</UserControl>
^ Back To Top
Code
using System.Windows;
using System.Windows.Controls;
namespace Visiblox.Charts.Examples.RadarChart
{
public partial class RadarChartExample : UserControl
{
public RadarChartExample()
{
InitializeComponent();
// Add the line series to the chart
RadarChart.Series[0].DataSeries = GenerateMonsterTruckData();
RadarChart.Series[1].DataSeries = GenerateDragRacerData();
RadarChart.YLabelsPosition = RadialLabelPosition.Left;
}
private IDataSeries GenerateDragRacerData()
{
var dragRacer = new DataSeries<string, double>("Drag racer");
dragRacer.Add(new DataPoint<string, double>() { X = "Speed", Y = 10 });
dragRacer.Add(new DataPoint<string, double>() { X = "Durability", Y = 3 });
dragRacer.Add(new DataPoint<string, double>() { X = "Comfort", Y = 4 });
dragRacer.Add(new DataPoint<string, double>() { X = "Power", Y = 9 });
dragRacer.Add(new DataPoint<string, double>() { X = "Space", Y = 3 });
dragRacer.Add(new DataPoint<string, double>() { X = "Speed", Y = 10 });
return dragRacer;
}
private IDataSeries GenerateMonsterTruckData()
{
var monsterTruck = new DataSeries<string, double>("Monster Truck");
monsterTruck.Add(new DataPoint<string, double>() { X = "Speed", Y = 5 });
monsterTruck.Add(new DataPoint<string, double>() { X = "Durability", Y = 8 });
monsterTruck.Add(new DataPoint<string, double>() { X = "Comfort", Y = 6 });
monsterTruck.Add(new DataPoint<string, double>() { X = "Power", Y = 10 });
monsterTruck.Add(new DataPoint<string, double>() { X = "Space", Y = 5 });
monsterTruck.Add(new DataPoint<string, double>() { X = "Speed", Y = 5 });
return monsterTruck;
}
private void Circular_Checked(object sender, RoutedEventArgs e)
{
if (RadarChart == null)
return;
RadarChart.DrawingMode = RadialChartDrawingMode.Circular;
}
private void Straight_Checked(object sender, RoutedEventArgs e)
{
if (RadarChart == null)
return;
RadarChart.DrawingMode = RadialChartDrawingMode.Straight;
}
private void Left_Checked(object sender, RoutedEventArgs e)
{
if (RadarChart == null)
return;
RadarChart.YLabelsPosition = RadialLabelPosition.Left;
}
private void Center_Checked(object sender, RoutedEventArgs e)
{
if (RadarChart == null)
return;
RadarChart.YLabelsPosition = RadialLabelPosition.Centre;
}
private void Right_Checked(object sender, RoutedEventArgs e)
{
if (RadarChart == null)
return;
RadarChart.YLabelsPosition = RadialLabelPosition.Right;
}
}
}
^ Back To Top
Real Charting Power...
View Features and Try for Free
Chart Types
See example charts and download sample source code
Line And Area Charts
Bar And Column Charts
Financial Charts
Other Charts
Developer Features
Check out chart features and technical documentation
High Performance
Customised Look And Feel
Application Development
Other Features
