SeriesTemplateAdapter.SeriesDataMember Property

Gets or sets the name of the data source field whose values serve as generated series identifiers.

Namespace: DevExpress.XamarinForms.Charts

Assembly: DevExpress.XamarinForms.Charts.dll

NuGet Package: DevExpress.XamarinForms.Charts

Declaration

public string SeriesDataMember { get; set; }

Property Value

Type	Description
String	The data source field name.

Remarks

When the chart generates series from the bound data source, it groups data records into series according to values of the field assigned to the SeriesDataMember property. You can access an object that specifies this field value when you define a template for generated series (for example, to set a series name displayed in the chart’s legend). To do this, use the SeriesDataMemberValue property of a SeriesTemplateData object that serves as a binding context for the series template (SeriesTemplate).

Example

In this example, the chart generates bar series that visualize GDP per capita by year for the G7 from 2017 to 2019.

1. Create a data source for series generation. Each object in the list stores a country’s name, year, and the GDP value for this year.

   C#

   using System.Collections.Generic;
   
   namespace SeriesTemplateExample {
       public class ViewModel {
           CountryYearlyStatisticsData data = new CountryYearlyStatisticsData();
           public List<CountryGdpStatistics> SeriesData => this.data.SeriesData;
       }
   
       public class CountryYearlyStatisticsData {
           public List<CountryGdpStatistics> SeriesData { get; } = new List<CountryGdpStatistics> {
               new CountryGdpStatistics("UK", 45903.9, 2017),
               new CountryGdpStatistics("UK", 48651.6, 2018),
               new CountryGdpStatistics("UK", 49912.4, 2019),
               new CountryGdpStatistics("USA", 60091.6, 2017),
               new CountryGdpStatistics("USA", 63043.0, 2018),
               new CountryGdpStatistics("USA", 65240.4, 2019),
               new CountryGdpStatistics("Canada", 48479.8, 2017),
               new CountryGdpStatistics("Canada", 51106.9, 2018),
               new CountryGdpStatistics("Canada", 51822.2, 2019),
               new CountryGdpStatistics("Japan", 41119.4, 2017),
               new CountryGdpStatistics("Japan", 42840.2, 2018),
               new CountryGdpStatistics("Japan", 43642.7, 2019),
               new CountryGdpStatistics("France", 44622.8, 2017),
               new CountryGdpStatistics("France", 47922.2, 2018),
               new CountryGdpStatistics("France", 50693.5, 2019),
               new CountryGdpStatistics("Germany", 53122.0, 2017),
               new CountryGdpStatistics("Germany", 56689.0, 2018),
               new CountryGdpStatistics("Germany", 57557.9, 2019),
               new CountryGdpStatistics("Italy", 41713.9, 2017),
               new CountryGdpStatistics("Italy", 44444.7, 2018),
               new CountryGdpStatistics("Italy", 45691.0, 2019),
           };
       }
   
       public class CountryGdpStatistics {
           public string Country { get; private set; }
           public double Gdp { get; private set; }
           public int Year { get; private set; }
   
           public CountryGdpStatistics(string country, double gdp, int year) {
               Country = country;
               Gdp = gdp;
               Year = year;
           }
       }
   }
   

2. Set the ChartView.SeriesDataTemplate property to a SeriesTemplateAdapter object with the following properties specified (all these settings are required for series generation):

   • DataSource – the data source for chart series.
   • SeriesDataMember – a data source field whose unique values identify series.
   • ArgumentDataMember – a data source field that contains arguments for series points. Each point requires one argument value.
   • ValueDataMembers – a collection of data source fields that contain values for series points. The number of fields you need to specify in this collection depends on the series type – some series (for example, Bubble or Stock) require more than one value for each argument.
   • SeriesTemplate – a template that defines the type of generated series and configures series settings and elements. This template’s binding context is a SeriesTemplateData object. Its SeriesDataMemberValue property returns values of the data source field assigned to SeriesDataMember. Bind this property to the series DisplayName.
   XAML

   <ContentPage xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                xmlns:dxc="http://schemas.devexpress.com/xamarin/2014/forms/charts"
                xmlns:local="clr-namespace:SeriesTemplateExample"
                x:Class="SeriesTemplateExample.MainPage">
       <ContentPage.BindingContext>
           <local:ViewModel/>
       </ContentPage.BindingContext>
       <dxc:ChartView>
           <dxc:ChartView.SeriesDataTemplate>
               <dxc:SeriesTemplateAdapter DataSource="{Binding SeriesData}"
                                          SeriesDataMember="Country"
                                          ArgumentDataMember="Year">
                   <dxc:SeriesTemplateAdapter.ValueDataMembers>
                       <dxc:ValueDataMember Type="Value" Member="Gdp"/>
                   </dxc:SeriesTemplateAdapter.ValueDataMembers>
                   <dxc:SeriesTemplateAdapter.SeriesTemplate>
                       <DataTemplate>
                           <dxc:BarSeries DisplayName="{Binding Path=SeriesDataMemberValue}"/>
                       </DataTemplate>
                   </dxc:SeriesTemplateAdapter.SeriesTemplate>
               </dxc:SeriesTemplateAdapter>
           </dxc:ChartView.SeriesDataTemplate>
           <dxc:ChartView.AxisY>
               <dxc:NumericAxisY AlwaysShowZeroLevel="False">
                   <dxc:NumericAxisY.Style>
                       <dxc:AxisStyle MajorTickmarksVisible="True"
                                      MinorTickmarksVisible="True"/>
                   </dxc:NumericAxisY.Style>
                   <dxc:NumericAxisY.Title>
                       <dxc:AxisTitle Text="Total GDP per capita, USD"/>
                   </dxc:NumericAxisY.Title>
               </dxc:NumericAxisY>
           </dxc:ChartView.AxisY>
           <dxc:ChartView.AxisX>
               <dxc:NumericAxisX GridAlignment="1"/>
           </dxc:ChartView.AxisX>
           <dxc:ChartView.Legend>
               <dxc:Legend/>
           </dxc:ChartView.Legend>
       </dxc:ChartView>
   </ContentPage>
   

ChartView displays generated series in addition to series that you define in the Series collection.