This topic explains using a code example how to add the XamDoughnutChart™ control to a WPF application.
The following topic is a prerequisite to understanding this topic:
This topic contains the following sections:
The following procedure demonstrates how to add a XamDoughnutChart to a WPF application.
The following screenshot is a preview of the result.
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"Following is a conceptual overview of the process:
1. Adding sample data
2. Adding the XamDoughnutChart control
3. Adding the series
The following steps demonstrate how to add the XamDoughnutChart control to an application.
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 ClassCreate 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 } _
}Add a XamDoughnutChart declaration to your page’s root Grid element:
In XAML:
<ig:XamDoughnutChart x:Name="doughnutChart">
</ig:XamDoughnutChart>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.
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.
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”.
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”.
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>The following topic provides additional information related to this topic.