Series
- 8 minutes to read
A series is a group of data points that have the same argument and value types. A series type determines the number of values that are required to define a point, and it also specifies points’ appearance. Series can also have additional series elements that help you analyze data and provide extra information. Series also allows you to filter data before displaying it in a chart.
The following image displays the Area, Line and Side-by-Side Bar series in a 2D XY Diagram:
This document consists of the following sections:
Creating Series
You can add series to a chart using one of the following approaches:
-
The following example shows how to add an empty series to a chart:
<dxc:ChartControl x:Name="chart"> <dxc:XYDiagram2D> <dxc:PointSeries2D DisplayName="Series 1"/> </dxc:XYDiagram2D> </dxc:ChartControl>
The table below lists classes and properties that allow you to add series to a chart manually:
Member Description Diagram.Series The diagram series’ collection. This is a content property. You can declare series in XAML directly after a diagram’s declaration without wrapping them in opening and closing Diagram.Series tags. Series The base class for all individual series in the chart. Create a series from a data source
You can generate series based on a data source’s column. This column also determines newly created series’ display names.
<dxc:ChartControl DataSource="{Binding Data}"> <dxc:ChartControl.DataContext> <local:SalesByYear/> </dxc:ChartControl.DataContext> <dxc:XYDiagram2D SeriesDataMember="Year"> <dxc:XYDiagram2D.SeriesTemplate> <dxc:BarSideBySideSeries2D ArgumentDataMember="Region" ValueDataMember="Sales"/> </dxc:XYDiagram2D.SeriesTemplate> </dxc:XYDiagram2D> </dxc:ChartControl>
public class SalesByYear { public DataTable Data { get { return GetData(); } } public DataTable GetData() { DataTable table = new DataTable(); table.Columns.AddRange(new DataColumn[] { new DataColumn("Year", typeof(int)), new DataColumn("Region", typeof(string)), new DataColumn("Sales", typeof(decimal)) }); table.Rows.Add(2015, "Asia", 4.23M); table.Rows.Add(2015, "North America", 3.485M); table.Rows.Add(2015, "Europe", 3.088M); table.Rows.Add(2015, "Australia", 1.78M); table.Rows.Add(2015, "South America", 1.602M); table.Rows.Add(2016, "Asia", 4.768M); table.Rows.Add(2016, "North America", 3.747M); table.Rows.Add(2016, "Europe", 3.357M); table.Rows.Add(2016, "Australia", 1.957M); table.Rows.Add(2016, "South America", 1.823M); table.Rows.Add(2017, "Asia", 5.289M); table.Rows.Add(2017, "North America", 4.182M); table.Rows.Add(2017, "Europe", 3.725M); table.Rows.Add(2017, "Australia", 2.272M); table.Rows.Add(2017, "South America", 2.117M); return table; } }
The markup above uses the following classes and properties:
Member Description ChartControl.DataSource Gets or sets the chart control’s data source. Diagram.SeriesTemplate Specifies the series template settings. Diagram.SeriesDataMember Gets or sets the name of the data field whose values are used to automatically generate and populate series.
Populating Series with Data
You need to populate a series with data after it is created. You can do this manually by adding each point to the series’s points collection or filling the series with data from a data source automatically.
Manual adding points to a series
In this approach, the series points’ collection is populated with series points. Each point the chart visualizes should have an argument and values (their number can differ for different series).
The following markup adds a Line series with five points:
<dxc:ChartControl> <dxc:XYDiagram2D> <dxc:LineSeries2D DisplayName="2017"> <dxc:SeriesPoint Argument="Asia" Value="5.289"/> <dxc:SeriesPoint Argument="North America" Value="4.182"/> <dxc:SeriesPoint Argument="Europe" Value="3.725"/> <dxc:SeriesPoint Argument="Australia" Value="2.272"/> <dxc:SeriesPoint Argument="South America" Value="2.117"/> </dxc:LineSeries2D> </dxc:XYDiagram2D> </dxc:ChartControl>
The markup above uses the following classes and properties:
Member Description Series.Points The series’s collection of points. SeriesPoint An individual point. Populate a series with data from a data source
In this case, you define data source’s fields that provide points’ arguments and values.
<dxc:ChartControl> <dxc:ChartControl.DataContext> <local:SalesByYear/> </dxc:ChartControl.DataContext> <dxc:XYDiagram2D> <dxc:BarSideBySideSeries2D DisplayName="2017" DataSource="{Binding Data}" ArgumentDataMember="Region" ValueDataMember="Sales"/> </dxc:XYDiagram2D> </dxc:ChartControl>
public class SalesByYear { public DataTable Data { get { return GetData(); } } public DataTable GetData() { DataTable table = new DataTable(); table.Columns.AddRange(new DataColumn[] { new DataColumn("Region", typeof(string)), new DataColumn("Sales", typeof(decimal)) }); table.Rows.Add("Asia", 5.289M); table.Rows.Add("North America", 4.182M); table.Rows.Add("Europe", 3.725M); table.Rows.Add("Australia", 2.272M); table.Rows.Add("South America", 2.117M); return table; } }
The following classes and properties are used in the example:
Member | Description |
---|---|
Series.DataSource | Specifies the series’s data source. |
Series.ArgumentDataMember | Gets or sets the name of the data field which contains arguments for generated series points. |
Series.ValueDataMember | Gets or sets the name of the data field which contains values for generated series points. |
Use additional DataMember properties if you are using a series that has several values per an argument. For example, use the BubbleSeries2D.WeightDataMember property to set the field that provides weights for Bubble Series points. The following table lists series that have specific ValueDataMember parameters:
Series | Parameters |
---|---|
FinancialSeries2D.CloseValueDataMember FinancialSeries2D.HighValueDataMember | |
Important
The series may provide points that represent data source values. These points are generated on the first series points getting. Do not request series points when the series is data bound due to performance reasons .
Refer to the Lesson 3 - Bind Chart Series to Data topic for a step-by-step guide on how to create a chart, bind it to a data source and populate its points with data.
MVVM Binding
When you are designing a charting application using the Model View ViewModel (MVVM) approach, use the Diagram.SeriesItemsSource property to bind a chart to a collection of objects containing series view models. Use Diagram.SeriesItemTemplate or Diagram.SeriesItemTemplateSelector to configure how the series view model is converted to a series on a chart.
Member | Description |
---|---|
Diagram.SeriesItemsSource | Gets or sets the collection of objects used to generate series. |
Diagram.SeriesItemTemplate | Gets or sets the DataTemplate that specifies how to convert a model object to a series. |
Diagram.SeriesItemTemplateSelector | Gets or sets the custom logic for selecting a data template that converts a model object to a series. |
Examples:
- How to: Bind Series to View Models Using the Item Template
- How to: Bind Series to View Models Using the Item Template Selector
Series Types
The Chart control provides 2D and 3D series. The following sections lists all available series:
Series of each type have unique specifics and settings. Ensure that series are compatible before plotting them in the same diagram. Refer to the Series Types Compatibility document to learn which series you can combine in one diagram.
Series Elements
Element | Image |
---|---|
You can show points with labels to provide extra information, such as point arguments or values. | |
Total labels display summary values of several Bar Stacked or Pie series’ points. | |
Indicators helps you to analyze and process series data visually. | |
A series title provides additional information on a series. |
Colorize Series
The XYSeries.Brush property allows you to specify series color. The Area Series and Funnel Series provide the Border properties that contain the Brush property. This property specifies the series’ border brush:
The following markup demonstrates how to specify a custom color for a series:
<dxc:ChartControl Padding="0">
<dxc:ChartControl.DataContext>
<local:MainViewModel/>
</dxc:ChartControl.DataContext>
<dxc:ChartControl.Diagram>
<dxc:XYDiagram2D>
<dxc:XYDiagram2D.Series>
<dxc:SplineAreaSeries2D DataSource="{Binding History}"
ArgumentDataMember="Date"
ValueDataMember="Balance"
Brush="#43a047">
<dxc:SplineAreaSeries2D.Border>
<dxc:SeriesBorder Brush="#88000000"/>
</dxc:SplineAreaSeries2D.Border>
</dxc:SplineAreaSeries2D>
</dxc:XYDiagram2D.Series>
</dxc:XYDiagram2D>
</dxc:ChartControl.Diagram>
</dxc:ChartControl>
class HistoryItem {
public DateTime Date { get; set; }
public double Balance { get; set; }
}
class MainViewModel {
public IReadOnlyList<HistoryItem> History { get; }
public MainViewModel() {
DateTime initDate = DateTime.Now;
History = new List<HistoryItem> {
new HistoryItem { Date = initDate, Balance = 277 },
new HistoryItem { Date = initDate.AddYears(-1), Balance = 328.5 },
new HistoryItem { Date = initDate.AddYears(-2), Balance = 297 },
new HistoryItem { Date = initDate.AddYears(-3), Balance = 255.3 },
new HistoryItem { Date = initDate.AddYears(-4), Balance = 173.5 },
new HistoryItem { Date = initDate.AddYears(-5), Balance = 131.8 },
};
}
}
The classes and properties below configure series’ colors:
Symbol | Description |
---|---|
Gets or sets the color of the XY-series. | |
Provides access to a series border’s settings. | |
Contains settings the specify the appearance of a series border. |
Important
The Chart Control can use only SolidColorBrush objects to draw series.
Note
The pie/donut series and funnel series do not provide series color and you should utilize series points’ brushes.
Tip
Use the ChartControl.BoundDataChanged event to specify colors of series generated via the Series Template.