ComponentOne FlexChart for UWP
Sunburst Chart / Quick Start
In This Topic
    Quick Start
    In This Topic

    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.

    To quickly get started with Sunburst chart and observe how it appears on running the application, follow these steps:

    1. Add Sunburst Chart to the Application
    2. Bind Sunburst Chart to a Data Source
    3. Run the Application

    The following image displays how a basic Sunburst chart appears after completing the steps mentioned above.

    Step 1: Add Sunburst Chart to the Application

    1. Create a Blank App (Universal Windows) in Visual Studio.
    2. Drag and drop the C1Sunburst control to the MainPage.
      The following dlls are added automatically to the application:
      C1.UWP.dll
      C1.UWP.DX.dll
      C1.UWP.FlexChart.dll

      The XAML markup resembles the following code in the <Grid></Grid> tags.
      <Grid>
          <Chart:C1Sunburst x:Name="flexPie" 
                            Binding="Value" 
                            BindingName="Name" 
                            HorizontalAlignment="Left" 
                            Height="300" 
                            VerticalAlignment="Top" 
                            Width="300">
              <Chart:C1Sunburst.ItemsSource>
                  <Chart:FlexPieSliceCollection>
                      <Chart:FlexPieSlice Name="Slice1" Value="1"/>
                      <Chart:FlexPieSlice Name="Slice2" Value="2"/>
                      <Chart:FlexPieSlice Name="Slice3" Value="3"/>
                      <Chart:FlexPieSlice Name="Slice4" Value="4"/>
                  </Chart:FlexPieSliceCollection>
              </Chart:C1Sunburst.ItemsSource>
          </Chart:C1Sunburst>
      </Grid>
      

    Step 2: Bind Sunburst Chart to a Data Source

    In this step, you 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, you bind Sunburst to the created class using the ItemsSource property provided by the FlexChartBase class. Then, you specify numeric values and labels for the Sunburst slices using the Binding and the BindingName property, respectively of the FlexChartBase and the C1FlexPie class.

    1. Add a class, DataService and add the following code.
      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
      
      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;
              }
          }
      }
      
    2. Add a class, SunburstViewModel and add the following code.
      Imports System.Linq
      Imports System.ComponentModel
      Imports System.Collections.Generic
      Imports System
      Imports C1.Chart
      
      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
      
      using C1.Chart;
      using System;
      using System.Collections.Generic;
      using System.ComponentModel;
      using System.Linq;
      
      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();
                  }
              }
          }
      }
      
    3. Add a class, DataItem and add the following code.
      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
      
      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; }
          }
      }
      
    4. Add a class, Converter and add the following code.
      Imports Windows.UI.Xaml.Data
      Imports System
      Imports C1.Chart
      
      Public Class EnumToStringConverter
          Implements IValueConverter
          Public Function Convert(value As Object, targetType As Type, parameter As Object, language As String) 
              As Object Implements IValueConverter.Convert
              Return value.ToString()
          End Function
      
          Public Function ConvertBack(value As Object, targetType As Type, parameter As Object, language As String)
              As Object Implements IValueConverter.ConvertBack
              If targetType Is GetType(Position) Then
                  Return CType([Enum].Parse(GetType(Position), value.ToString()), Position)
              Else
                  Return CType([Enum].Parse(GetType(Palette), value.ToString()), Palette)
              End If
          End Function
      End Class
      
      Public Class StringToEnumConverter
          Implements IValueConverter
          Public Function Convert(value As Object, targetType As Type, parameter As Object, language As String)
              As Object Implements IValueConverter.Convert
              If targetType Is GetType(Position) Then
                  Return CType([Enum].Parse(GetType(Position), value.ToString()), Position)
              End If
      
              Return Nothing
          End Function
      
          Public Function ConvertBack(value As Object, targetType As Type, parameter As Object, language As String)
               As Object Implements IValueConverter.ConvertBack
              Throw New NotImplementedException()
          End Function
      End Class
      
      using C1.Chart;
      using System;
      using System.Collections.Generic;
      using System.Globalization;
      using System.Linq;
      using System.Text;
      using System.Threading.Tasks;
      using Windows.UI.Xaml.Data;
      
      namespace SunburstQuickStart
      {
          public class EnumToStringConverter : IValueConverter
          {
              public object Convert(object value, Type targetType, object parameter, string language)
              {
                  throw new NotImplementedException();
              }
      
              public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
              {
                  return value.ToString();
              }
      
              public object ConvertBack(object value, Type targetType, object parameter, string language)
              {
                  throw new NotImplementedException();
              }
      
              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());
              }
          }
      }
      
    5. Edit the <Grid> tag to the following markup to provide data to Sunburst.

      <Page
          x:Class="SunburstQuickStart.MainPage"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          xmlns:local="using:SunburstQuickStart"
          xmlns:Chart="using:C1.Xaml.Chart"
          xmlns:Xaml="using:C1.Xaml"
          xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
          xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
          mc:Ignorable="d">
          <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
              <Grid.Resources>
                  <local:EnumToStringConverter x:Key="PaletteConverter" />
              </Grid.Resources>
              <Grid.DataContext>
                  <local:SunburstViewModel />
              </Grid.DataContext>
              <Chart:C1Sunburst x:Name="sunburst" 
                                Offset="0" 
                                ItemsSource="{Binding HierarchicalData}" 
                                Binding="Value" 
                                BindingName="Year,Quarter,Month" 
                                ChildItemsPath="Items" 
                                ToolTipContent="{}{name}&#x000A;{y}" 
                                Margin="91,0,0,356"  >
                  <Chart:C1Sunburst.DataLabel>
                      <Chart:PieDataLabel Position="Inside" 
                                          Content="{}{name}" 
                                          ConnectingLine="True" 
                                          Border="True">
                      </Chart:PieDataLabel>
                  </Chart:C1Sunburst.DataLabel>
              </Chart:C1Sunburst>
          </Grid>
      </Page>
      

    Step 3: Running the Application

    Press F5 to run the application and observe how Sunburst chart appears.