IChartDataItem.SeriesName Property
Returns the name of a data source field that is used to group data by series.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v24.2.dll
NuGet Package: DevExpress.Blazor
Declaration
string SeriesName { get; }
Property Value
Type | Description |
---|---|
String | The name of a data source field |
Remarks
Objects that implement the IChartDataItem interface are used to specify a chart’s data source when you link the Chart and Pivot Grid components. The IChartDataItem.SeriesName
returns the name of a data source field that is used to group data by series. Assign this name to NameField property.
Follow the steps below to link the Chart and Pivot Grid components:
- Create a method that asynchronously loads data from an IEnumerable<T> data source (Sales.Load() in this example).
- Create a DxPivotGridDataProvider<T> object based on the created method.
- Bind the Chart to the provider object. Use the ChartDataSource property.
- Bind the Pivot Grid to the provider object. Use the PivotGridDataSource property.
<DxChart Data="@(PivotGridDataProvider.ChartDataSource)">
<DxChartCommonSeries NameField="@((IChartDataItem s) => s.SeriesName)"
ArgumentField="@(s => s.Argument)"
ValueField="@(s => s.Value)"
SeriesType="ChartSeriesType.Bar" />
</DxChart>
<DxPivotGrid Data="@(PivotGridDataProvider.PivotGridDataSource)">
<DxPivotGridField Field="@nameof(SaleInfo.Region)" SortOrder="PivotGridSortOrder.Ascending"
Area="PivotGridFieldArea.Row"></DxPivotGridField>
<DxPivotGridField Field="@nameof(SaleInfo.Country)" Area="PivotGridFieldArea.Row"></DxPivotGridField>
<DxPivotGridField Field="@nameof(SaleInfo.City)" Area="PivotGridFieldArea.Row"></DxPivotGridField>
<DxPivotGridField Field="@nameof(SaleInfo.Date)" GroupInterval="PivotGridGroupInterval.Year"
Area="PivotGridFieldArea.Column" Caption="Year"> </DxPivotGridField>
<DxPivotGridField Field="@nameof(SaleInfo.OrderId)" Caption="Count" Area="PivotGridFieldArea.Data"
SummaryType="PivotGridSummaryType.Count"> </DxPivotGridField>
</DxPivotGrid>
@code {
DxPivotGridDataProvider<SaleInfo> PivotGridDataProvider = DxPivotGridDataProvider<SaleInfo>.Create(Sales.Load());
}
The Chart shows data from the Pivot Grid’s lowest expanded level. The Chart is updated when a user expands or collapses rows/columns in the Pivot Grid.