How to: Bind a Web Chart to an ASPxPivotGrid

• Dec 13, 2023
• 3 minutes to read

This tutorial describes how to create a Web page with two linked controls: an ASPxPivotGrid bound to a data source, and a WebChartControl bound to that pivot grid.

Note that in order to synchronize both controls during callbacks, they should both be placed within an ASPxCallbackPanel, and have their EnableCallbacks properties disabled.

Tip

For the complete sample project, see the following DevExpress Support Center example: https://supportcenter.devexpress.com/ticket/details/e1242/web-forms-how-to-link-a-web-chart-to-a-pivot-grid.

This tutorial consists of the following sections.

• Bind a Pivot Grid to Data
• Bind a Chart to the Pivot Grid
• Get the Result

Bind a Pivot Grid to Data

1. Create a new ASP.NET Web Application or open an existing one.

2. Drop the ASPxPivotGrid control from the DX.24.1: Data & Analytics toolbox tab onto the Web page.

   

3. Bind the pivot grid to a database. To do this, click the pivot grid control’s smart tag. In the invoked Tasks list, expand the Choose Data Source drop-down menu and click New data source….

   

4. Follow the steps in the Data Source Configuration Wizard, to connect to a data source. In this example, we’ll use the gsp.mdb file (which is shipped with the installation of the ASP.NET Chart Control), copied to the application’s folder.

   

5. After you’ve connected to a data source, click the pivot grid’s smart tag again. In its Tasks list, choose Fields….

   

6. In the invoked dialog, click Retrieve fields.

   

7. Remove the ID field, since it is unnecessary in this project.

   

8. Specify the Area property for each field:

   • for the Region field, set this property to ColumnArea;
   • for the Year field, set this property to RowArea;
   • for the GSP field, set this property to DataArea.

   

   Click OK to close the dialog and apply the changes.

Now that the pivot grid is bound to data, the next step is to bind a Web chart to this grid.

Bind a Chart to the Pivot Grid

9. Add a chart to the Web page.

10. Click the chart control’s smart tag. In the invoked actions list, expand the Choose Data Source drop-down menu and select ASPxPivotGrid1.

    

11. Adjust chart options as required. For example, set the WebChartControl.ToolTipEnabled property to true to enable tooltips. You can also set the WebChartControl.CrosshairEnabled property to false to disable the crosshair cursor.

Get the Result

The WebChartControl is now bound to the ASPxPivotGrid. Run the application and view the result.

Notice that once you filter the grid’s columns and rows in a browser, this has an immediate effect on the linked chart.