[]
This quick start is intended to guide you through a step-by-step process of creating a simple Sunburst application and running the same in Visual Studio.
The following image displays how a basic Sunburst chart appears after completing the steps mentioned above.
To quickly get started with Sunburst chart and observe how it appears on running the application, follow these steps:
Create a WPF Application (.NET Framework/.NET Core) for .NET Framework version and .NET versions in Visual Studio.
Drag and drop the C1Sunburst control to the MainWindow.
The following dlls or Nuget Packages are automatically added to the application:
C1.WPF.4.6.2 or C1.WPF.Core for .NET version
C1.WPF.DX.4.6.2 or C1.WPF.DX for .NET version
C1.WPF.FlexChart.4.6.2 or C1.WPF.Chart for .NET version.
The XAML markup resembles the following code in the <Grid></Grid> tags.
xml
<c1:C1Sunburst x:Name="flexPie"
Binding="Value"
BindingName="Name"
HorizontalAlignment="Left"
Height="300"
VerticalAlignment="Top"
Width="300">
<c1:C1Sunburst.ItemsSource>
<c1:FlexPieSliceCollection>
<c1:FlexPieSlice Name="Slice1" Value="1"/>
<c1:FlexPieSlice Name="Slice2" Value="2"/>
<c1:FlexPieSlice Name="Slice3" Value="3"/>
<c1:FlexPieSlice Name="Slice4" Value="4"/>
</c1:FlexPieSliceCollection>
</c1:C1Sunburst.ItemsSource>
</c1:C1Sunburst>
In this step, first create a class DataService that generates random sales data for four quarters, namely Q1, Q2, Q3, and Q4 in 2013, 2014, and 2015. Next, bind Sunburst to the created class using the ItemsSource property provided by the FlexChartBase class. Then, specify numeric values and labels for the Sunburst slices using the Binding and the BindingName property, respectively of the FlexChartBase and the C1FlexPie class.
Add a class, DataService and add the following code.
vbnet
Imports System.Collections.Generic
Imports System.Linq
Imports System.Text
Imports System.Threading.Tasks
Public Class DataService
Private rnd As New Random()
Shared _default As DataService
Public Shared ReadOnly Property Instance() As DataService
Get
If _default Is Nothing Then
_default = New DataService()
End If
Return _default
End Get
End Property
Public Shared Function CreateHierarchicalData() As List(Of DataItem)
Dim rnd As Random = Instance.rnd
Dim years As New List(Of String)()
Dim times As New List(Of List(Of String))() From {
New List(Of String)() From {
"Jan",
"Feb",
"Mar"
},
New List(Of String)() From {
"Apr",
"May",
"June"
},
New List(Of String)() From {
"Jul",
"Aug",
"Sep"
},
New List(Of String)() From {
"Oct",
"Nov",
"Dec"
}
}
Dim items As New List(Of DataItem)()
Dim yearLen = Math.Max(CInt(Math.Round(Math.Abs(5 - Instance.rnd.NextDouble() * 10))), 3)
Dim currentYear As Integer = DateTime.Now.Year
For i As Integer = yearLen To 1 Step -1
years.Add((currentYear - i).ToString())
Next
Dim quarterAdded = False
years.ForEach(
Function(y)
Dim i = years.IndexOf(y)
Dim addQuarter = Instance.rnd.NextDouble() > 0.5
If Not quarterAdded AndAlso i = years.Count - 1 Then
addQuarter = True
End If
Dim year = New DataItem() With {
.Year = y
}
If addQuarter Then
quarterAdded = True
times.ForEach(Function(q)
Dim addMonth = Instance.rnd.NextDouble() > 0.5
Dim idx As Integer = times.IndexOf(q)
Dim quar As String = "Q" + (idx + 1).ToString()
Dim quarters = New DataItem() With {
.Year = y,
.Quarter = quar
}
If addMonth Then
q.ForEach(
Function(m)
quarters.Items.Add(New DataItem() With {
.Year = y,
.Quarter = quar,
.Month = m,
.Value = rnd.[Next](20, 30)
})
End Function)
Else
quarters.Value = rnd.[Next](80, 100)
End If
year.Items.Add(quarters)
End Function)
Else
year.Value = rnd.[Next](80, 100)
End If
items.Add(year)
End Function)
Return items
End Function
Public Shared Function CreateFlatData() As List(Of FlatDataItem)
Dim rnd As Random = Instance.rnd
Dim years As New List(Of String)()
Dim times As New List(Of List(Of String))() From {
New List(Of String)() From {
"Jan",
"Feb",
"Mar"
},
New List(Of String)() From {
"Apr",
"May",
"June"
},
New List(Of String)() From {
"Jul",
"Aug",
"Sep"
},
New List(Of String)() From {
"Oct",
"Nov",
"Dec"
}
}
Dim items As New List(Of FlatDataItem)()
Dim yearLen = Math.Max(CInt(Math.Round(Math.Abs(5 - rnd.NextDouble() * 10))), 3)
Dim currentYear As Integer = DateTime.Now.Year
For i As Integer = yearLen To 1 Step -1
years.Add((currentYear - i).ToString())
Next
Dim quarterAdded = False
years.ForEach(
Function(y)
Dim i = years.IndexOf(y)
Dim addQuarter = rnd.NextDouble() > 0.5
If Not quarterAdded AndAlso i = years.Count - 1 Then
addQuarter = True
End If
If addQuarter Then
quarterAdded = True
times.ForEach(Function(q)
Dim addMonth = rnd.NextDouble() > 0.5
Dim idx As Integer = times.IndexOf(q)
Dim quar As String = "Q" + (idx + 1).ToString()
If addMonth Then
q.ForEach(Function(m)
items.Add(New FlatDataItem() With {
.Year = y,
.Quarter = quar,
.Month = m,
.Value = rnd.[Next](30, 40)
})
End Function)
Else
items.Add(New FlatDataItem() With {
.Year = y,
.Quarter = quar,
.Value = rnd.[Next](80, 100)
})
End If
End Function)
Else
items.Add(New FlatDataItem() With {
.Year = y.ToString(),
.Value = rnd.[Next](80, 100)
})
End If
End Function)
Return items
End Function
End Class
csharp
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace SunburstQuickStart
{
public class DataService
{
Random rnd = new Random();
static DataService _default;
public static DataService Instance
{
get
{
if (_default == null)
{
_default = new DataService();
}
return _default;
}
}
public static List<DataItem> CreateHierarchicalData()
{
Random rnd = Instance.rnd;
List<string> years = new List<string>();
List<List<string>> times = new List<List<string>>()
{
new List<string>() { "Jan", "Feb", "Mar"},
new List<string>() { "Apr", "May", "June"},
new List<string>() { "Jul", "Aug", "Sep"},
new List<string>() { "Oct", "Nov", "Dec" }
};
List<DataItem> items = new List<DataItem>();
var yearLen = Math.Max((int)Math.Round(Math.Abs(5 - Instance.rnd.NextDouble() * 10)), 3);
int currentYear = DateTime.Now.Year;
for (int i = yearLen; i > 0; i--)
{
years.Add((currentYear - i).ToString());
}
var quarterAdded = false;
years.ForEach(y =>
{
var i = years.IndexOf(y);
var addQuarter = Instance.rnd.NextDouble() > 0.5;
if (!quarterAdded && i == years.Count - 1)
{
addQuarter = true;
}
var year = new DataItem() { Year = y };
if (addQuarter)
{
quarterAdded = true;
times.ForEach(q =>
{
var addMonth = Instance.rnd.NextDouble() > 0.5;
int idx = times.IndexOf(q);
var quar = "Q" + (idx + 1);
var quarters = new DataItem() { Year = y, Quarter = quar };
if (addMonth)
{
q.ForEach(m =>
{
quarters.Items.Add(new DataItem()
{
Year = y,
Quarter = quar,
Month = m,
Value = rnd.Next(20, 30)
});
});
}
else
{
quarters.Value = rnd.Next(80, 100);
}
year.Items.Add(quarters);
});
}
else
{
year.Value = rnd.Next(80, 100);
}
items.Add(year);
});
return items;
}
public static List<FlatDataItem> CreateFlatData()
{
Random rnd = Instance.rnd;
List<string> years = new List<string>();
List<List<string>> times = new List<List<string>>()
{
new List<string>() { "Jan", "Feb", "Mar"},
new List<string>() { "Apr", "May", "June"},
new List<string>() { "Jul", "Aug", "Sep"},
new List<string>() { "Oct", "Nov", "Dec" }
};
List<FlatDataItem> items = new List<FlatDataItem>();
var yearLen = Math.Max((int)Math.Round(Math.Abs(5 - rnd.NextDouble() * 10)), 3);
int currentYear = DateTime.Now.Year;
for (int i = yearLen; i > 0; i--)
{
years.Add((currentYear - i).ToString());
}
var quarterAdded = false;
years.ForEach(y =>
{
var i = years.IndexOf(y);
var addQuarter = rnd.NextDouble() > 0.5;
if (!quarterAdded && i == years.Count - 1)
{
addQuarter = true;
}
if (addQuarter)
{
quarterAdded = true;
times.ForEach(q =>
{
var addMonth = rnd.NextDouble() > 0.5;
int idx = times.IndexOf(q);
var quar = "Q" + (idx + 1);
if (addMonth)
{
q.ForEach(m =>
{
items.Add(new FlatDataItem()
{
Year = y,
Quarter = quar,
Month = m,
Value = rnd.Next(30, 40)
});
});
}
else
{
items.Add(new FlatDataItem()
{
Year = y,
Quarter = quar,
Value = rnd.Next(80, 100)
});
}
});
}
else
{
items.Add(new FlatDataItem()
{
Year = y.ToString(),
Value = rnd.Next(80, 100)
});
}
});
return items;
}
}
}
Add a class, SunburstViewModel and add the following code.
vbnet
Imports C1.Chart
Imports System.Linq
Imports System.Collections.Generic
Public Class SunburstViewModel
Public ReadOnly Property HierarchicalData() As List(Of DataItem)
Get
Return DataService.CreateHierarchicalData()
End Get
End Property
Public ReadOnly Property FlatData() As List(Of FlatDataItem)
Get
Return DataService.CreateFlatData()
End Get
End Property
Public ReadOnly Property Positions() As List(Of String)
Get
Return [Enum].GetNames(GetType(Position)).ToList()
End Get
End Property
Public ReadOnly Property Palettes() As List(Of String)
Get
Return [Enum].GetNames(GetType(Palette)).ToList()
End Get
End Property
End Class
csharp
using C1.Chart;
using System;
using System.Linq;
using System.Collections.Generic;
namespace SunburstQuickStart
{
public class SunburstViewModel
{
public List<DataItem> HierarchicalData
{
get
{
return DataService.CreateHierarchicalData();
}
}
public List<FlatDataItem> FlatData
{
get
{
return DataService.CreateFlatData();
}
}
public List<string> Positions
{
get
{
return Enum.GetNames(typeof(Position)).ToList();
}
}
public List<string> Palettes
{
get
{
return Enum.GetNames(typeof(Palette)).ToList();
}
}
}
}
Add a class, DataItem and add the following code.
vbnet
Public Class DataItem
Private _items As List(Of DataItem)
Public Property Year() As String
Get
Return m_Year
End Get
Set
m_Year = Value
End Set
End Property
Private m_Year As String
Public Property Quarter() As String
Get
Return m_Quarter
End Get
Set
m_Quarter = Value
End Set
End Property
Private m_Quarter As String
Public Property Month() As String
Get
Return m_Month
End Get
Set
m_Month = Value
End Set
End Property
Private m_Month As String
Public Property Value() As Double
Get
Return m_Value
End Get
Set
m_Value = Value
End Set
End Property
Private m_Value As Double
Public ReadOnly Property Items() As List(Of DataItem)
Get
If _items Is Nothing Then
_items = New List(Of DataItem)()
End If
Return _items
End Get
End Property
End Class
Public Class FlatDataItem
Public Property Year() As String
Get
Return m_Year
End Get
Set
m_Year = Value
End Set
End Property
Private m_Year As String
Public Property Quarter() As String
Get
Return m_Quarter
End Get
Set
m_Quarter = Value
End Set
End Property
Private m_Quarter As String
Public Property Month() As String
Get
Return m_Month
End Get
Set
m_Month = Value
End Set
End Property
Private m_Month As String
Public Property Value() As Double
Get
Return m_Value
End Get
Set
m_Value = Value
End Set
End Property
Private m_Value As Double
End Class
csharp
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace SunburstQuickStart
{
public class DataItem
{
List<DataItem> _items;
public string Year { get; set; }
public string Quarter { get; set; }
public string Month { get; set; }
public double Value { get; set; }
public List<DataItem> Items
{
get
{
if (_items == null)
{
_items = new List<DataItem>();
}
return _items;
}
}
}
public class FlatDataItem
{
public string Year { get; set; }
public string Quarter { get; set; }
public string Month { get; set; }
public double Value { get; set; }
}
}
Add a class, Converter and add the following code.
vbnet
Imports C1.Chart
Imports System.Collections.Generic
Imports System.Globalization
Imports System.Linq
Imports System.Text
Imports System.Threading.Tasks
Imports System.Windows.Data
Public Class EnumToStringConverter
Implements IValueConverter
Public Function Convert(value As Object,
targetType As Type,
parameter As Object,
culture As CultureInfo) As Object
Return value.ToString()
End Function
Public Function ConvertBack(value As Object,
targetType As Type,
parameter As Object,
culture As CultureInfo) As Object
If targetType = GetType(Position) Then
Return DirectCast([Enum].Parse(GetType(Position),
value.ToString()),
Position)
Else
Return DirectCast([Enum].Parse(GetType(Palette),
value.ToString()),
Palette)
End If
End Function
Private Function IValueConverter_Convert(value As Object,
targetType As Type,
parameter As Object,
culture As CultureInfo) As Object Implements IValueConverter.Convert
Throw New NotImplementedException()
End Function
Private Function IValueConverter_ConvertBack(value As Object,
targetType As Type,
parameter As Object,
culture As CultureInfo) As Object Implements IValueConverter.ConvertBack
Throw New NotImplementedException()
End Function
End Class
csharp
using C1.Chart;
using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Data;
namespace SunburstQuickStart
{
public class EnumToStringConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
return value.ToString();
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
if (targetType == typeof(Position))
return (Position)Enum.Parse(typeof(Position), value.ToString());
else
return (Palette)Enum.Parse(typeof(Palette), value.ToString());
}
}
}
Edit the XAML code to provide data to Sunburst.
xml
<Window
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:local="clr-namespace:SunburstQuickStart"
xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"
x:Class="SunburstQuickStart.MainWindow"
mc:Ignorable="d"
Title="MainWindow" Height="800" Width="691.337">
<Grid Margin="0,0,0,-120">
<Grid.Resources>
<local:EnumToStringConverter x:Key="PaletteConverter" />
</Grid.Resources>
<Grid.DataContext>
<local:SunburstViewModel />
</Grid.DataContext>
<c1:C1Sunburst x:Name="sunburst"
Offset="0"
ItemsSource="{Binding HierarchicalData}"
Binding="Value"
BindingName="Year,Quarter,Month"
ChildItemsPath="Items"
ToolTipContent="{}{name}
{y}"
Margin="0,121,73,0" >
<c1:C1Sunburst.DataLabel>
<c1:PieDataLabel Position="Inside"
Content="{}{name}"
ConnectingLine="True"
Border="True">
</c1:PieDataLabel>
</c1:C1Sunburst.DataLabel>
</c1:C1Sunburst>
</Grid>
</Window>
Press F5 to run the application and observe how Sunburst chart appears.