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.

Tip

For the complete sample project, see the following DevExpress Support Center example: https://supportcenter.devexpress.com/ticket/details/e258/how-to-show-custom-data-over-webchartcontrol-using-aspxpopupcontrol.

Do the following to implement tooltips for a Web chart.

  1. Create a new ASP.NET Web Application (Visual Studio 2012, 2013, 2015, 2017 or 2019), 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.21.2: 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.21.2: 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.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;
        }
    }
    
  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