Version

Adding XamDoughnutChart

Topic Overview

Purpose

This topic explains using a code example how to add the XamDoughnutChart™ control to a WPF application.

Required background

The following topic is a prerequisite to understanding this topic:

Topic Purpose

This topic gives an overview of the XamDoughnutChart control and its main features.

In this topic

This topic contains the following sections:

Introduction

The following procedure demonstrates how to add a XamDoughnutChart to a WPF application.

Preview

The following screenshot is a preview of the result.

XamDoughnutChart Adding 1.png

Prerequisites

To complete the procedure, you need a WPF application with references to the following NuGet package:

  • Infragistics.WPF.Charts

For more information on setting up the NuGet feed and adding NuGet packages, you can take a look at the following documentation: NuGet Feeds.

Also, you need a blank page with the Infragistics xml namespace declared as follows:

In XAML:

xmlns:ig="http://schemas.infragistics.com/xaml"

Overview

Following is a conceptual overview of the process:

1. Adding sample data

2. Adding the XamDoughnutChart control

3. Adding the series

Steps

The following steps demonstrate how to add the XamDoughnutChart control to an application.

1. Add sample data.

1. Define the sample data model class

In the code-behind of your page, add the following class declaration:

In C#:

public class Category
{
    public string Label { get; set; }
    public double AveragePrice { get; set; }
}

In Visual Basic:

Public Class Category
      Public Property Label As String
      Public Property AveragePrice As Double
End Class

Create a list of instances of this class to serve as the ItemsSource for the rendered RingSeries.

2. Create a sample data list and set it as the page’s DataContext.

In the constructor of the page add the following code:

In C#:

this.DataContext = new List<Category>()
{
    new Category () {Label="Footwear", AveragePrice=52.34},
    new Category () {Label="Clothing", AveragePrice=32.2},
    new Category () {Label="Accessories", AveragePrice=15.12},
    new Category () {Label="Equipment", AveragePrice=39.65}
};

In Visual Basic:

Me.DataContext = New List(Of Category)() From { _
      New Category() With {      .Label = "Footwear", .AveragePrice = 52.34      }, _
      New Category() With {      .Label = "Clothing", .AveragePrice = 32.2 }, _
      New Category() With {      .Label = "Accessories", .AveragePrice = 15.12 }, _
      New Category() With {      .Label = "Equipment",      .AveragePrice = 39.65      } _
}

2. Add the XamDoughnutChart control.

Add a XamDoughnutChart declaration to your page’s root Grid element:

In XAML:

<ig:XamDoughnutChart x:Name="doughnutChart">
</ig:XamDoughnutChart>

3. Add the series.

1. Add the series.

In order to display data in a XamDoughnutChart , you need to add one or more series to its Series collection. This procedure uses one RingSeries.

2. Set the required properties to the series.

In order to configure the series correctly, you need to set the ItemsSource , ValueMemberPath and optionally the LabelMemberPath and LabelsPosition properties in accordance with the following steps.

  1. Set the ItemsSource

The ItemsSource is an IEnumerable property that is where the data for the series comes from. In this example bind this property directly to the DataContext.

  1. Set the ValueMemberPath

You must set the ValueMemberPath to the name of a property used to calculate the size of its respective slice. In the case of this example set the property to “AveragePrice”.

  1. Set the LabelMemberPath

You must set the LabelMemberPath to the name of a property in your data objects used to get the labels for each slice of the chart. In the case of this example set the property to “Label”.

  1. Set the LabelsPosition (optional)

The LabelsPosition specifies labels positions relative to their slice. In the case of this example set it to BestFit.

In XAML:

<ig:XamDoughnutChart x:Name="doughnutChart">
    <ig:XamDoughnutChart.Series>
        <ig:RingSeries ItemsSource="{Binding}" LabelMemberPath="Label" ValueMemberPath="AveragePrice" LabelsPosition="BestFit"/>
    </ig:XamDoughnutChart.Series>
</ig:XamDoughnutChart>

Related Content

The following topic provides additional information related to this topic.

Topic Purpose

This topic explains how to configure selection and explosion for the slices of the XamDoughnutChart .