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

• Nov 30, 2020
• 3 minutes to read

This example demonstrates how to show custom data obtained from a WebChartControl‘s data source, when a series point is hovered with the mouse. This can be implemented, using the ASPxPopupControl, with the ASPxCallbackPanel being placed in it, so that data is obtained during its callbacks.

Tip

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=E258.

To implement tooltips for a Web chart, do the following.

1. Create a new ASP.NET Web Application (Visual Studio 2012, 2013, 2015, 2017 or 2019), or open an existing ones.
2. Drop a chart onto the Web page, and bind it to a data source.

3. From the DX.19.1: Navigation & Layout toolbox tab, drop an ASPxPopupControl onto the page.

   

   Set its ASPxPopupControlBase.ClientInstanceName property to pc.

4. Then, from the same toolbox tab, drop an ASPxCallbackPanel onto the ASPxPopupControl1.

   

   Set its ASPxPanelBase.ClientInstanceName property to cbp.

5. Now, switch to the DX.19.1: Common Controls toolbox tab, and place two ASPxLabel controls within the ASPxCallbackPanel1.

   

6. Now, select the ASPxCallbackPanel1, and click its smart tag. In its actions list, click Client-Side Events… link.

   

   In the invoked dialog, handle the CallbackClientSideEventsBase.EndCallback event in the following way.

   JS

   function(s, e) {
       pc.SetHeaderText(s.cpHeaderText);
       pc.ShowAtPos(pcX, pcY);
   }
   

7. In a similar way, click the chart’s smart tag, and in its actions list, click Client-Side Events… link.

   

   In the invoked dialog, handle the ChartClientSideEvents.ObjectSelected event in the following way.

   JS

   function(s, e) {
       if (e.hitInfo.inSeries) {
           var obj = e.additionalHitObject;
           if (obj != null){
               pcX = e.absoluteX;
               pcY = e.absoluteY;
               cbp.PerformCallback(obj.argument);
           }
       }
   }
   

8. Now, handle the ASPxCallbackPanel.Callback event in the following way.

   C#

   using System;
   using System.Data;
   using System.Web.UI;
   using System.Collections;
   using DevExpress.Web.ASPxClasses;
   // ...
   
   string headerText = null;
   
   protected void ASPxCallbackPanel1_Callback(object sender, CallbackEventArgsBase e) {
       String param = e.Parameter.Replace("'", "''");
       AccessDataSource1.SelectCommand = 
           "SELECT * FROM [Products] WHERE ProductName = '" + param + "'";
       IEnumerable data = AccessDataSource1.Select(DataSourceSelectArguments.Empty);
       foreach (DataRowView row in data) {
           ASPxLabel1.Text = "Price: " + row["UnitPrice"].ToString();
           ASPxLabel2.Text = "Units in Stock: " + row["UnitsInStock"].ToString();
           headerText = row["ProductName"].ToString();
           break;
       }
   }
   

   VB.NET

   Imports System
   Imports System.Data
   Imports System.Web.UI
   Imports System.Collections
   Imports DevExpress.Web.ASPxClasses
   ' ...
   
   Private headerText As String = Nothing
   
   Protected Sub ASPxCallbackPanel1_Callback(ByVal source As Object, _ 
   ByVal e As CallbackEventArgsBase)
       AccessDataSource1.SelectCommand = _ 
           "SELECT * FROM [Products] WHERE ProductName = '" & e.Parameter & "'"
       Dim data As IEnumerable = AccessDataSource1.Select(DataSourceSelectArguments.Empty)
       For Each row As DataRowView In data
           ASPxLabel1.Text = "Price: " & row("UnitPrice").ToString()
           ASPxLabel2.Text = "Units in Stock: " & row("UnitsInStock").ToString()
           headerText = row("ProductName").ToString()
           Exit For
       Next row
   End Sub
   

9. And, write the following code into the ASPxPanelBase.CustomJSProperties event handler.

   C#

   protected void ASPxCallbackPanel1_CustomJSProperties(object sender, 
       CustomJSPropertiesEventArgs e) {
       if (headerText != null)
           e.Properties.Add("cpHeaderText", headerText);
   }
   

   VB.NET

   Protected Sub ASPxCallbackPanel1_CustomJSProperties(ByVal sender As Object, _ 
   ByVal e As CustomJSPropertiesEventArgs)
       If Not headerText Is Nothing Then
           e.Properties.Add("cpHeaderText", headerText)
       End If
   End Sub
   

Run the application, and view the result.