Integration with the Chart Control
- 5 minutes to read
The Pivot Grid presents multidimensional data in a cross-tabular form, allowing end-users to perform various data shaping operations. They can customize the report to reshape data and create a layout that fits their specific data analysis needs.
ASPxPivotGrid allows end-users to go further and visualize data displayed in the Pivot Grid using the Chart Control.
Tip
Watch the video: DevExpress ASP.NET Pivot Grid: Integration with Chart Control (YouTube)
This topic contains the following sections.
Binding Overview
The Chart control retrieves data from the Pivot Grid control in the following manner:
- The series data member values are generated based on Pivot Grid control columns;
- The arguments data member values are generated based on Pivot Grid control rows;
- The values data member contains summary values.
Series and argument data members are created based on column/row headers (e.g., ‘1994’, ‘Produce Total’, ‘Grand Total’). If a column/row is identified by multiple fields, the corresponding data member value is constructed from the respective field values connected by the ‘|’ sign (e.g., ‘1995 | January’, ‘Beverages | Chai’).
Implementation
To set an ASPxPivotGrid as the WebChartControl data source, do one of the following:
At design time, click the WebChartControl smart tag and select the ASPxPivotGrid instance from the Choose Data Source drop-down list:
- Assign the ASPxPivotGrid.ID property value to the WebChartControl ASPxDataWebControlBase.DataSourceID property.
By default, the WebChartControl displays all the data of the ASPxPivotGrid control. Use the PivotGridOptionsChartDataSourceBase.DataProvideMode property to control whether or not the ASPxPivotGrid should only pass values to the WebChartControl from the lowest aggregation level.
Use the PivotGridOptionsChartDataSourceBase.ProvideDataByColumns property to toggle the default behavior in order to create a series data member based on rows, and an argument data member based on columns.
To update the WebChartControl according to the changes made to the ASPxPivotGrid, you can use the following approaches:
- Set the ASPxPivotGrid ASPxPivotGrid.EnableCallBacks property to false.
- Call the ASPxClientWebChartControl.PerformCallback method from the ASPxClientPivotGrid.EndCallback event handler.
Binding and Layout Options
When the ASPxPivotGrid.ID property is assigned to the ASPxDataWebControlBase.DataSourceID property, the chart bindings and layout are auto-adjusted. If necessary, you can manually specify WebChartControl binding settings that define how to create a diagram from supplied data. There are two modes of providing binding settings to ChartControl: automatic and manual. You can specify which one to use via the WebChartControl.AutoBindingSettingsEnabled property.
- In automatic mode (the WebChartControl.AutoBindingSettingsEnabled property is set to true), binding settings are automatically adjusted. In this instance, WebChartControl uses data source series, argument and value data members to create series, arguments and values, respectively. You can manually adjust automatically applied binding settings by handling the WebChartControl.CustomizeAutoBindingSettings event. This event is raised when automatic settings are about to be applied to the WebChartControl.
- In manual mode (the ChartControl.AutoBindingSettingsEnabled property is set to false), specify which data member should be used to create series via the ChartControl.SeriesDataMember property. Then use the SeriesBase.ArgumentDataMember and SeriesBase.ValueDataMembers properties of the ChartControl.SeriesTemplate object to specify which data members should be used to create arguments and values, respectively. Use the ‘Series’, ‘Arguments’ and ‘Values’ strings to refer to corresponding data members stored in the data source.
When binding settings are applied, you can manually specify layout settings that define how to display the diagram. As with binding settings, you can let WebChartControl adjust these settings automatically (in this instance, you can manually customize them by handling various events) or specify them manually. Use the WebChartControl.AutoLayoutSettingsEnabled property to specify whether or not layout settings are automatically adjusted.
For a list of binding and layout settings, see the Pivot Charting topic in the Chart Control documentation.
Data Types Specifics
If a Pivot Grid contains multiple data fields with different data types, cell values are converted to Decimal (if possible). Use the PivotGridOptionsChartDataSourceBase.ProvideCellValuesAsType property to override this behavior by explicitly specifying a data type to which cell values should be converted.
WebChartControl supports only Numeric and DateTime series point values (see Series Scale Types to learn more). To convert cell values into an appropriate type in a custom manner, handle the ASPxPivotGrid.CustomChartDataSourceData event.
Member Table
ASPxPivotGrid provides multiple options, enabling you to specify how its data is interpreted by WebChartControl. These options are represented by a PivotGridWebOptionsChartDataSource class instance, and accessed via the ASPxPivotGrid.OptionsChartDataSource property.
| Property | Description |
|---|---|
| PivotGridOptionsChartDataSourceBase.ProvideDataByColumns | Gets or sets whether series in a chart control are created for PivotGrid columns or rows. |
| PivotGridOptionsChartDataSourceBase.DataProvideMode | Gets or sets what data the pivot grid should pass to a bound chart control. |
| PivotGridOptionsChartDataSourceBase.ProvideColumnCustomTotals | Gets or sets whether column custom totals should be passed to a chart control. |
| PivotGridOptionsChartDataSourceBase.ProvideColumnGrandTotals | Gets or sets whether column grand totals are passed to a chart control. |
| PivotGridOptionsChartDataSourceBase.ProvideRowCustomTotals | Gets or sets whether row custom totals should be displayed in a chart control. |
| PivotGridOptionsChartDataSourceBase.ProvideRowGrandTotals | Gets or sets whether row grand totals are passed to a chart control. |
| PivotGridOptionsChartDataSourceBase.ProvideRowTotals | Gets or sets whether row totals are passed to a chart control. |
| PivotGridOptionsChartDataSourceBase.ProvideEmptyCells | Gets or sets whether empty cells should be processed by the Chart control. |
| PivotGridOptionsChartDataSourceBase.FieldValuesProvideMode | Gets or sets how field values are passed to the chart control. |
| PivotGridOptionsChartDataSourceBase.ProvideCellValuesAsType | Gets or sets the type to which cell values are converted, before they are exported to the Chart Control. |
| PivotGridOptionsChartDataSourceBase.ProvideColumnFieldValuesAsType | Gets or sets the type to which the column field values are converted before they are exported to the chart control. |
| PivotGridOptionsChartDataSourceBase.ProvideRowFieldValuesAsType | Gets or sets the type to which the row field values are converted, before they are exported to the chart control. |
| PivotGridOptionsChartDataSourceBase.MaxAllowedPointCountInSeries | Gets or sets the maximum number of points allowed in a series. |
| PivotGridOptionsChartDataSourceBase.MaxAllowedSeriesCount | Gets or sets the maximum number of series allowed in the chart data source. |
Note
Note that PivotGridOptionsChartDataSourceBase.Provide…Totals properties are in effect when the PivotGridOptionsChartDataSourceBase.DataProvideMode is set to the PivotChartDataProvideMode.UseCustomSettings.