Xamarin.Forms | ComponentOne
Controls / Sunburst Chart / QuickStart
In This Topic
    QuickStart
    In This Topic

    This section describes how to add a Sunburst Chart control to your portable or shared app and add data to it. For more information on how to add Xamarin components in C# or XAML, see Adding Xamarin Components using C# or Adding Xamarin Components using XAML.

    This topic comprises of three steps:

    The following image shows how the Sunburst Chart appears after completing the steps above.

    Step 1: Create a Data source for Sunburst Chart

    The following classes serve as a data source for the Sunburst Chart control.

    C#
    Copy Code
        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<SunburstDataItem> 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<SunburstDataItem> items = new List<SunburstDataItem>();
                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;
    
                foreach (string y in years)
                {
                    var i = years.IndexOf(y);
                    var addQuarter = Instance.rnd.NextDouble() > 0.5;
                    if (!quarterAdded && i == years.Count - 1)
                    {
                        addQuarter = true;
                    }
                    var year = new SunburstDataItem() { Year = y };
                    if (addQuarter)
                    {
                        quarterAdded = true;
    
                        foreach (List<string> q in times)
                        {
                            var addMonth = Instance.rnd.NextDouble() > 0.5;
                            int idx = times.IndexOf(q);
                            var quar = "Q" + (idx + 1);
                            var quarters = new SunburstDataItem() { Year = y, Quarter = quar };
                            if (addMonth)
                            {
                                foreach (string m in q)
                                {
                                    quarters.Items.Add(new SunburstDataItem()
                                    {
                                        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;
                foreach (string y in years)
                {
    
                    var i = years.IndexOf(y);
                    var addQuarter = rnd.NextDouble() > 0.5;
                    if (!quarterAdded && i == years.Count - 1)
                    {
                        addQuarter = true;
                    }
                    if (addQuarter)
                    {
                        quarterAdded = true;
                        foreach (List<string> q in times)
                        {
                            var addMonth = rnd.NextDouble() > 0.5;
                            int idx = times.IndexOf(q);
                            var quar = "Q" + (idx + 1);
                            if (addMonth)
                            {
                                foreach (string m in q)
                                {
                                    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;
            }
    
            public static C1CollectionView<Item> CreateGroupCVData()
            {
                var data = new List<Item>();
                var quarters = new string[] { "Q1", "Q2", "Q3", "Q4" };
                var months = new[]
                {
                    new { Name = "Jan", Value = 1 },
                    new { Name = "Feb", Value = 2 },
                    new { Name = "Mar", Value = 3 },
                    new { Name = "Apr", Value = 4 },
                    new { Name = "May", Value = 5 },
                    new { Name = "June", Value = 6 },
                    new { Name = "Jul", Value = 7 },
                    new { Name = "Aug", Value = 8 },
                    new { Name = "Sep", Value = 9 },
                    new { Name = "Oct", Value = 10 },
                    new { Name = "Nov", Value = 11 },
                    new { Name = "Dec", Value = 12 }
                };
                var year = DateTime.Now.Year;
                int yearLen, i, len = 100;
                var years = new List<int>();
                yearLen = 3;
    
                for (i = yearLen; i > 0; i--)
                {
                    years.Add(year - i);
                }
    
                int y, q, m;
                for (i = 0; i < len; i++)
                {
                    y = (int)Math.Floor(Instance.rnd.NextDouble() * yearLen);
                    q = (int)Math.Floor(Instance.rnd.NextDouble() * 4);
                    m = (int)Math.Floor(Instance.rnd.NextDouble() * 3);
    
                    data.Add(new Item()
                    {
                        Year = years[y],
                        Quarter = quarters[q],
                        MonthName = months[q].Name,
                        MonthValue = months[q].Value,
                        Value = Math.Round(Instance.rnd.NextDouble() * 100)
                    });
                }
                var cv = new C1CollectionView<Item>(data);
    
                //Sort cannot work synchronize with group in current CollectionView
                SortDescription yearSortDescription = new SortDescription("Year", SortDirection.Ascending);
                SortDescription quarterSortDescription = new SortDescription("Quarter", SortDirection.Ascending);
                SortDescription monthSortDescription = new SortDescription("MonthValue", SortDirection.Ascending);
                SortDescription[] sortDescriptions = new SortDescription[] { yearSortDescription, quarterSortDescription, monthSortDescription };
                cv.SortAsync(sortDescriptions);
    
                GroupDescription yearGroupDescription = new GroupDescription("Year");
                GroupDescription quarterGroupDescription = new GroupDescription("Quarter");
                GroupDescription monthGroupDescription = new GroupDescription("MonthName");
                GroupDescription[] groupDescriptions = new GroupDescription[] { yearGroupDescription, quarterGroupDescription, monthGroupDescription };
                //   cv.GroupAsync(groupDescriptions);
    
                return cv;
            }
        }
    
        public class FlatDataItem
        {
            public string Year { get; set; }
            public string Quarter { get; set; }
            public string Month { get; set; }
            public double Value { get; set; }
        }
        public class SunburstDataItem
        {
            List<SunburstDataItem> _items;
    
            public string Year { get; set; }
            public string Quarter { get; set; }
            public string Month { get; set; }
            public double Value { get; set; }
            public List<SunburstDataItem> Items
            {
                get
                {
                    if (_items == null)
                    {
                        _items = new List<SunburstDataItem>();
                    }
    
                    return _items;
                }
            }
        }
    
        public class Item
        {
            public int Year { get; set; }
            public string Quarter { get; set; }
            public string MonthName { get; set; }
            public int MonthValue { get; set; }
            public double Value { get; set; }
        }
    
    Back to Top

    Step 2: Add a SunBurst Chart control

    Complete the following steps to initialize a Sunburst Chart control in C# or XAML.

    In Code

    1. Add a new class (for example QuickStart.cs) to your Portable or Shared project and include the following references:
      C#
      Copy Code
      using Xamarin.Forms;
      using C1.Xamarin.Forms.Chart;
      
    2. Instantiate a Sunburst Chart control in a new method GetChartControl( ).
      C#
      Copy Code
      public static C1Sunburst GetChartControl()
              {
                  C1.Xamarin.Forms.Chart.C1Sunburst c1Sunburst = new C1.Xamarin.Forms.Chart.C1Sunburst();
                  c1Sunburst.ItemsSource = DataService.CreateFlatData();
                  c1Sunburst.Binding = "Value";
                  c1Sunburst.BindingName = "Year,Quarter,Month";
                  PieDataLabel pieDataLabel = new PieDataLabel();
                  pieDataLabel.Content = "{}{name}";
                  return c1Sunburst;
              }
      

    In XAML

    1. Add a new Content Page (for example QuickStart.xaml) to your Portable or Shared project and modify the <ContentPage> tag to include the following references:
      XAML
      Copy Code
      <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
      xmlns:c1="clr-namespace:C1.Xamarin.Forms.Chart;assembly=C1.Xamarin.Forms.Chart"
      x:Class="SunBurst.MainPage">
      
    2. Initialize a Sunburst Chart control by adding the markup for the control between the <ContentPage></ContentPage> tags and inside the <StackLayout></StackLayout> tags, as shown below.
      XAML
      Copy Code
      <Grid Margin="10">
              <c1:C1Sunburst x:Name="sunburst"  Binding="Value" BindingName="Year,Quarter,Month" ToolTipContent="{}{name}
      {y}" LegendPosition="Bottom">
                  <c1:C1Sunburst.DataLabel>
                      <c1:PieDataLabel Position="Center" Content="{}{name}">
                          <c1:PieDataLabel.Style>
                              <c1:ChartStyle StrokeThickness="0"/>
                          </c1:PieDataLabel.Style>
                      </c1:PieDataLabel>
                  </c1:C1Sunburst.DataLabel>
              </c1:C1Sunburst>
          </Grid>
      </ContentPage>
      
    3. In the Solution Explorer, expand the QuickStart.xaml node and open QuickStart.xaml.cs to view the C# code.
    4. In the QuickStart( ) class constructor, set the ItemSource property of Sunburst Chart to DataService.CreateFlatData();

      The following code shows what the QuickStart( ) class constructor looks like after completing this step.

      C#
      Copy Code
      public QuickStart()
      {
           InitializeComponent();
           this.sunburst.ItemsSource = DataService.CreateFlatData();
      }
      

    Back to Top

    Step 3: Run the Project

    1. In the Solution Explorer, double click App.cs to open it.
    2. Complete the following steps to display the Sunburst Chart control.
      • To return a C# class: In the class constructor App( ), set a new ContentPage as the MainPage and assign the control to the ContentPage's Content by invoking the method GetChartControl( ) defined in the previous procedure, Step 2: Add a Sunburst Chart Control.

        The following code shows the class constructor App() after completing steps above.

        C#
        Copy Code
        public App()
        {
            // The root page of your application
            MainPage = new ContentPage
            {
                Content = QuickStart.GetChartControl()
            };
        }
        
      • To return a Content Page: In the class constructor App(), set the Content Page QuickStart as the MainPage.

        The following code shows the class constructor App(), after completing this step.

        C#
        Copy Code
        public App()
        {
            // The root page of your application
            MainPage = new QuickStart();
        }
        
    3. Some additional steps are required to run iOS and UWP apps:
      • iOS App:
        1. In the Solution Explorer, double click AppDelegate.cs inside YourAppName.iOS project to open it.
        2. Add the following code to the FinishedLaunching() method.
          C#
          Copy Code
          C1.Xamarin.Forms.Chart.Platform.iOS.FlexChartRenderer.Init();
          
      • UWP App:
        1. In the Solution Explorer, expand MainPage.xaml.
        2. Double click MainPage.xaml.cs to open it.
        3. Add the following code to the class constructor.
          C#
          Copy Code
          C1.Xamarin.Forms.Chart.Platform.UWP.FlexChartRenderer.Init();
          
        4. (Optional) In case you compile your UWP application in Release mode, you need to explicitly add the following code to the OnLaunched method in your App.xaml.cs to include the correct assemblies within your application.

          C#
          Copy Code
          var assembliesToInclude = new List<Assembly>();
          assembliesToInclude.Add(typeof(C1.Xamarin.Forms.Chart.Platform.UWP.FlexChartRenderer)
          .GetTypeInfo().Assembly);
          assembliesToInclude.Add(typeof(C1.UWP.Chart.FlexChart).GetTypeInfo().Assembly);
          Xamarin.Forms.Forms.Init(e, assembliesToInclude);
          
    4. Press F5 to run the project.
    Back to Top