Integrate WebChartControl with a Pivot Grid Control
- 6 minutes to read
Tip
You can use DevExpress BI Dashboard to build data visualization and analysis UIs that include Charts, Grids, Maps, Pivot Grids, Cards, Range Selectors, and other elements. This cross-platform product is available as part of the DevExpress Universal Subscription.
Review the following help topic to learn the basics: Get Started with the DevExpress Dashboard.
The WebChartControl can load and visualize data directly from the ASPxPivotGrid control. Each control has a specific option set that configures how the Chart Control displays shared data. This guide explains how to configure a Pivot Charting bundle that contains the Pivot Grid control and the Chart Control using the Chart’s options.
For export, similar functionality is available for XRChart and XRPivotGrid–you can add charting and pivot grid functionality to a reporting application.
Populate the Pivot Grid with Data
A Web Chart Control retrieves Pivot Grid data after assigning an ASPxPivotGrid to the WebChartControl‘s ASPxDataWebControlBase.DataSourceID property at design time, or the ASPxDataWebControlBase.DataSource property at runtime.
The Pivot Grid control automatically provides all required data member names for series generation. Refer to the following section to learn more: Automatic Settings.
The WebChartControl.PivotGridDataSourceOptions property configures how the Chart retrieves Pivot Grid data. At the same time, the ASPxPivotGrid.OptionsChartDataSource property specifies how the Pivot Grid provides data to the chart. These properties specify options that are shared between the Chart and Pivot Grid. The table below outlines Chart and Pivot Grid settings that configure corresponding functionality.
| Chart setting | Pivot Grid setting | Description |
|---|---|---|
| Auto-initialization | ||
| PivotGridDataSourceOptions.AutoBindingSettingsEnabled | Specifies whether the chart’s data binding is automatically adjusted during Pivot Chart creation. | |
| PivotGridDataSourceOptions.AutoLayoutSettingsEnabled | Specifies whether the chart’s layout is automatically adjusted during Pivot Chart creation. | |
| Format of incoming data | ||
| PivotGridDataSourceOptions.RetrieveDataByColumns | PivotGridOptionsChartDataSourceBase.ProvideDataByColumns | Specify whether a Chart’s series are created based on its associated Pivot Grid’s columns or rows. |
| PivotGridDataSourceOptions.RetrieveEmptyCells | PivotGridOptionsChartDataSourceBase.ProvideEmptyCells | Specify whether empty cells should be passed to a Chart from its associated Pivot Grid. |
| Treatment of pivot totals | ||
| PivotGridDataSourceOptions.RetrieveColumnCustomTotals | PivotGridOptionsChartDataSourceBase.ProvideColumnCustomTotals | Specify whether column custom totals should be passed to a Chart from its associated Pivot Grid. |
| PivotGridDataSourceOptions.RetrieveColumnGrandTotals | PivotGridOptionsChartDataSourceBase.ProvideColumnGrandTotals | Specify whether column grand totals should be passed to a Chart from its associated Pivot Grid. |
| PivotGridDataSourceOptions.RetrieveColumnTotals | PivotGridOptionsChartDataSourceBase.ProvideColumnTotals | Specify whether column totals should be passed to a Chart from its associated Pivot Grid. |
| PivotGridDataSourceOptions.RetrieveRowCustomTotals | PivotGridOptionsChartDataSourceBase.ProvideRowCustomTotals | Specify whether row custom totals should be passed to a Chart from its associated Pivot Grid. |
| PivotGridDataSourceOptions.RetrieveRowGrandTotals | PivotGridOptionsChartDataSourceBase.ProvideRowGrandTotals | Specify whether row grand totals should be passed to a Chart from its associated Pivot Grid. |
| PivotGridDataSourceOptions.RetrieveRowTotals | PivotGridOptionsChartDataSourceBase.ProvideRowTotals | Specify whether row totals should be passed to a Chart from its associated Pivot Grid. |
| Limiting the number of series and points | ||
| PivotGridDataSourceOptions.MaxAllowedPointCountInSeries | PivotGridOptionsChartDataSourceBase.MaxAllowedPointCountInSeries | Limit the number of points in a Chart’s auto-created series based on the associated Pivot Grid data. |
| PivotGridDataSourceOptions.MaxAllowedSeriesCount | PivotGridOptionsChartDataSourceBase.MaxAllowedSeriesCount | Limit the number of auto-created series based on the associated Pivot Grid data. |
| Additional option | ||
| PivotGridDataSourceOptions.SinglePageOnly | PivotGridWebOptionsChartDataSource.CurrentPageOnly | Specify whether only data from the Pivot Grid’s current page is passed to the associated Chart. |
Note
The PivotGridDataSourceOptions.MaxAllowedSeriesCount and PivotGridDataSourceOptions.MaxAllowedPointCountInSeries properties’ default values limit series and series point count. Set these properties to 0 to remove the limit.
Automatic Settings
Automatic Binding Settings
The PivotGridDataSourceOptions.AutoBindingSettingsEnabled property configures whether the Chart automatically obtains data member names and a value scale type from the Pivot Grid.
The Pivot Grid provides the data member names to the Chart in the following manner if WebChartControl.PivotGridDataSourceOptions‘s PivotGridDataSourceOptions.RetrieveDataByColumns property is set to true:
- The name of the data member that specifies Pivot Grid’s columns to the Chart’s SeriesDataMember property.
- The name of the data member that specifies Pivot Grid’s rows to the Chart’s ArgumentDataMember property.
- The name of summarized values to the Chart’s ValueDataMember property.
Otherwise:
- The name of the data member that specifies Pivot Grid’s rows to the Chart’s SeriesDataMember property.
- The name of the data member that specifies Pivot Grid’s columns to the Chart’s ArgumentDataMember property.
- The name of summarized values to the Chart’s ValueDataMember property.
Handle the WebChartControl.CustomizeAutoBindingSettings event that the Chart raises after it obtains data member names to modify these settings.
Note that if multiple fields identify a column/row, the respective field values connected by the ‘|’ sign construct the corresponding data member value (for example, ‘1995 | January’).
Automatic Layout Settings
The WebChartControl.AutoLayoutSettingsEnabled property automatically adjusts the chart’s layout for two main diagram types.
XYDiagram
The first diagram type is the XYDiagram object.
If the argument scale type is date-time, the X-axis’s DateTimeScaleOptions.MeasureUnit and DateTimeScaleOptions.GridAlignment properties are set to the minimum possible measurement unit based on the values of all data points.
Also, the DateTimeOptions.Format and DateTimeOptions.FormatString values depend on the assigned measurement unit.
If arguments have different date-time measurement units (for example, years and months), the Chart automatically inserts scale breaks into the X-axis range (when the ScaleBreakOptions.Style is set to Straight, and ScaleBreakOptions.SizeInPixels is set to -1). This hides the space between data points (for example, a yearly point in a monthly scale has 11 empty months before the next point appears, and a scale break would hide this space).
Note that the specified measurement unit affects X-axis label text. The default setting for the AxisLabel.Staggered property is true and the AxisLabel.Angle property is 0.
The Chart raises the WebChartControl.BoundDataChanged event after applying these settings.
SimpleDiagram
The second diagram type is the SimpleDiagram object.
The legend is visible if the chart has a single auto-created series, or the number of points in all auto-created series is equal, and one or more series contain all points (with no empty points) from another series (only this series appears in the legend). The auto-created series’s SeriesBase.LegendTextPattern property is set to the “{A}” pattern.
If the legend is visible, then the SeriesLabelBase.TextPattern property value of each auto-created series is “{V}” or “{A} {V}” and the Pie and Doughnut series PieSeriesLabel.Position is set to TwoColumns.
Series titles accompany each auto-created series. The Title.Text property is set to the series name.
The Chart raises the WebChartControl.CustomizeXAxisLabels event after applying these settings.
The series label SeriesLabelBase.ResolveOverlappingMode is set to Default and changes to HideOverlapped if the label count is too large for the current diagram. The Chart raises the WebChartControl.CustomizeResolveOverlappingMode event before this property updates.
Finally, the chart legend’s LegendBase.MaxHorizontalPercentage and LegendBase.MaxVerticalPercentage properties are automatically adjusted for the best legend-to-diagram size ratio. The Chart raises the WebChartControl.CustomizeLegend event before updating the above properties.