Chart Integration

Grand Total
Amount Count Amount Count Amount Count Amount Total Count Total
43620 26 45200 28 22020 11 110840 65
189190 41 200865 44 111540 20 501595 105
101475 31 76130 27 42270 13 219875 71
215115 54 216425 55 83635 21 515175 130
229645 79 204205 67 72925 27 506775 173
97845 38 100480 42 50315 17 248640 97
Grand Total 876890 269 843305 263 382705 109 2102900 641

This demo illustrates linked Chart and Pivot Grid components. The chart is automatically updated when a user expands or collapses rows/columns in the Pivot Grid, and the Chart shows data from the Pivot Grid's lowest expanded level.

To link these components, do the following:

  1. Create a custom method that asynchronously returns an IEnumerable collection (Sales.Load() in this demo).
  2. Create a data provider object (PivotGridDataProvider in this demo).
  3. Bind the Pivot Grid to the data provider object's PivotGridDataSource property.
  4. Bind Charts to the data provider object's ChartDataSource property.
  5. Assign corresponding fields to NameField, ArgumentField, and ValueField properties.
  6. Additionally, you can assign a data field name to the PaneField property. This enables the Chart to group data by the corresponding field's values and create a separate Pane for each group.