Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]Welcome to DevExpress .NET Documentation
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Collapse]ASP.NET WebForms Controls
   Getting Started
  [Expand]Reporting
  [Collapse]Chart Control
   [Expand]Product Information
   [Expand]Getting Started
   [Expand]Fundamentals
   [Expand]Concepts
   [Expand]Design-Time Features
   [Expand]Visual Elements
   [Collapse]Examples
     How to: Add a Chart to a Web Application
     How to: Add a Chart to a Web Page (Runtime Sample)
     How to: Add a Chart to an ASPxCallbackPanel during its Callback (Runtime Sample)
     How to: Bind a Web Chart to Data (Runtime Sample)
     How to: Bind a Web Chart to an ASPxPivotGrid
     How to: Show Custom Data Over a Web Chart Using ASPxPopupControl
     How to: Use the Client-Side Model of the WebChartControl
     How to: Show Custom Tooltips for a WebChartControl
     How to: Invoke the Client Chart Designer
     How to: Configure a Chart for Printing
  [Expand]Grid View
  [Expand]Card View
  [Expand]Vertical Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Image and Data Browsing
  [Expand]Docking and Popups
  [Expand]Site Navigation and Layout
  [Expand]File Management
  [Expand]Multi-Use Site Controls
  [Expand]Scheduler
  [Expand]HTML Editor
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Gauges
  [Expand]Data Editors
  [Expand]Spell Checker
  [Expand]Query Builder
 [Expand]ASP.NET MVC Extensions
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

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

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 2010, 2012, 2013, 2015 or 2017), 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. Then, from the DX.17.2: Navigation & Layout toolbox tab, drop an ASPxRoundPanel onto the page.

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

  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.

Run the application, and view the result.


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.

Expanded See Also

Is this topic helpful?​​​​​​​