Skip to main content

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

  • 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.24.1: Navigation & Layout toolbox tab onto the page.

    HowTo_CustomData_0

    Set its ASPxPopupControlBase.ClientInstanceName property to pc.

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

    HowTo_CustomData_1

    Set its ASPxPanelBase.ClientInstanceName property to cbp.

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

    HowTo_CustomData_2

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

    HowTo_CustomData_3

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

    function(s, e) {
        pc.SetHeaderText(s.cpHeaderText);
        pc.ShowAtPos(pcX, pcY);
    }
    
  7. In a similar way, select the chart and click its smart tag. In its Tasks list, click Client-Side Events….

    HowTo_CustomData_4

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

    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. Handle the ASPxCallbackPanel.Callback event as follows.

    using System;
    using System.Data;
    using System.Web.UI;
    using System.Collections;
    using DevExpress.Web;
    // ...
    
    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;
        }
    }
    
  9. Add the following code to the ASPxPanelBase.CustomJSProperties event handler.

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

Run the application and view the result.

HowTo_CustomData_5

See Also