How to: Show Custom Data in a Web Chart Using ASPxPopupControl

• May 30, 2024
• 3 minutes to read

This example demonstrates how to show custom data obtained from a WebChartControl data source, when a mouse pointer hovers over a series point. To implement this, add an ASPxCallbackPanel to the ASPxPopupControl, so that data is obtained during its callbacks.

Do the following to implement tooltips for a Web chart.

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

2. Drop a chart onto the Web page, and bind it to a data source.

3. Drop an ASPxPopupControl from the DX.25.2: Navigation & Layout toolbox tab onto the page.

4. Drop an ASPxCallbackPanel from the same toolbox tab onto ASPxPopupControl1.

5. Switch to the DX.25.2: Common Controls toolbox tab, and place two ASPxLabel controls within ASPxCallbackPanel1.

6. Select ASPxCallbackPanel1 and click its smart tag. In the invoked Tasks list, click Client-Side Events….

7. In a similar way, select the chart and click its smart tag. In its Tasks list, click Client-Side Events….

8. Handle the ASPxCallbackPanel.Callback event as follows.

9. Add the following code to the ASPxPanelBase.CustomJSProperties event handler.

Run the application and view the result.

See Also

Concepts

How to: Add a Chart to an ASPxCallbackPanel during its Callback (Runtime Sample)

How to: Bind a Web Chart to an ASPxPivotGrid