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

• Jul 13, 2021
• 2 minutes 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 point coordinates converted to 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.

   

3. Drop an ASPxRoundPanel from the DX.20.2: Navigation & Layout toolbox tab onto the page.

   Drop two ASPxLabel controls from the DX.20.2: Common Controls toolbox tab onto the panel. Set their ClientInstanceName properties to lblArgument and lblValue, respectively.

   

4. Select the chart and click its smart tag. In its Tasks list, choose Client-Side Events….

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

   JS

   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.

In a similar way, it is possible to obtain the diagram coordinates of a series (e.g., Line Chart). A sample project is available in the following Support Center example: How to use the client-side model of the WebChartControl.