ChartView.SeriesDataTemplate Property

Specifies how the chart generates series from a data source based on a template.

Namespace: DevExpress.XamarinForms.Charts

Assembly: DevExpress.XamarinForms.Charts.dll

NuGet Package: DevExpress.XamarinForms.Charts

Declaration

public SeriesTemplateAdapter SeriesDataTemplate { get; set; }

Property Value

Type	Description
SeriesTemplateAdapter	An object that stores series generation settings.

Remarks

ChartView can generate series from the bound data source based on a template that defines series type and settings. This functionality is available if the data source stores data for all series (their names, point arguments and values), and can be useful when the number of series is unknown or very large.

Use the SeriesDataTemplate property to enable series generation.

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.