How to: Use the Client-Side Model of the WebChartControl

  • 2 min to read

This tutorial demonstrates how to use the client-side API of the WebChartControl. In particular, it explains how to convert the point coordinates into the diagram coordinates, and display them on the client side.

To obtain the point coordinates under into the diagram coordinates on the client side, do the following.

  1. Create a new ASP.NET Web Application (Visual Studio 2012, 2013, 2015, 2017 or 2019), or open an existing one.
  2. Drop a WebChartControl onto the page, and enable its WebChartControl.EnableClientSideAPI property.

    Add a series to the chart. In this example, we'll use a Spline series with its SeriesBase.ArgumentScaleType as date-time. So, for the X-axis, set the DateTimeScaleOptions.MeasureUnit property to Millisecond, and DateTimeScaleOptions.GridAlignment to Month. The chart will then look as follows.

    HowTo_ClientSideModel_0

  3. Then, from the DX.19.2: Navigation & Layout toolbox tab, drop an ASPxRoundPanel onto the page.

    And, from the DX.19.2: Common Controls toolbox tab, drop two ASPxLabel controls onto the panel. And, set their ClientInstanceName properties to lblArgument and lblValue, respectively.

    HowTo_ClientSideModel_1

  4. Again, select the chart, and click its smart tag. In its actions list, choose Client-Side Events... link.

    In the invoked dialog, handle the ASPxClientWebChartControl.ObjectHotTracked event as follows.

    
    function(s, e) {
        var chart = s.GetChart();
        var coord = chart.diagram.PointToDiagram(e.x, e.y);
    
        lblArgument.SetText(coord.dateTimeArgument);
        lblValue.SetText(Math.round(coord.numericalValue*100)/100);
    }
    

Run the application, and view the result.

HowTo_ClientSideModel_2

In a similar way, it's possible to obtain the diagram coordinates of a series (e.g. Line Chart). A sample project is available online, in the DevExpress Code Central database at How to use the client-side model of the WebChartControl.

See Also