[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]What's Installed
 [Expand]Common Concepts
 [Collapse]ASP.NET WebForms Controls
   Getting Started
  [Expand]Grid View
  [Expand]Tree List
  [Expand]Card View
  [Expand]Chart Control
  [Expand]Pivot Grid
  [Expand]Rich Text Editor
  [Expand]Site Navigation and Layout
  [Expand]HTML Editor
   [Expand]Product Information
   [Collapse]Getting Started
     Lesson 1 - Create a Circular Gauge
   [Expand]Visual Elements
   [Expand]Design-time Features
  [Expand]Vertical Grid
  [Expand]Data Editors
  [Expand]Docking and Popups
  [Expand]File Management
  [Expand]Data and Image Navigation
  [Expand]Multi-Use Site Controls
  [Expand]Spell Checker
  [Expand]Query Builder
 [Expand]ASP.NET MVC Extensions
 [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]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Lesson 1 - Create a Circular Gauge

This tutorial shows how to create a circular gauge and customize its scale's settings at design time.

This tutorial consists of the following steps.

  1. Create a New Project and Add a Gauge Control
  2. Run the Preset Manager
  3. Load the Required Gauge Preset
  4. Customize Gauge Scales
  5. Result

Expanded Step 1. Create a New Project and Add a Gauge Control

In this step, we will perform the common actions required when you add a Gauge control to your application.

  • Create a new ASP.NET Web Application project (Visual Studio 2012, 2013, 2015 or 2017) or open an existing one.
  • Add the ASPxGaugeControl component to your project. To do this, locate the ASPxGaugeControl item in a Visual Studio toolbox on the DX.18.2: Data & Analytics tab and drop it onto the form.

    This creates a new ASPxGaugeControl.

Expanded Step 2. Run the Preset Manager

  • Locate the Gauge's smart tag and click Run Preset Manager.

    After that, you will see the following wizard.

    Note that after you drop the Gauge in the previous step, the Gauge Preset Manager may be invoked automatically (if its "Show the preset manager every time a new Gauge control is dropped onto the form" option is enabled).

Expanded Step 3. Load the Required Gauge Preset

  • In the Preset Manager, click CircularFull to display presets with circular gauges.

    You can use one of two ways to load the gauge preset:

    • double-click the required preset on the Preset Manager;
    • select a preset and click the Load button at the bottom of the Preset Manager.

    The following image shows how to load the Ice-Cold Zone preset using the second approach.

    Then, you see the following gauge on the form.

Expanded Step 4. Customize Gauge Scales

  • To access the gauge's elements and customize their settings, run the Visual Gauge Control Designer.

    For this, locate the Gauge's smart tag and in the invoked menu, click Customize Gauge Control, as shown below.

  • In the Gauge Designer, select the second scale by clicking the scale2 node, and remove it using the Remove button.

  • Double-click the required gauge element to customize its settings in the right side list of the Visual Gauge Control Designer or click the element's smart tag and select Run Designer as shown below for the Gauge's scale.

  • Customize the Scale's properties in the Scale Designer as shown below, and click the Ok button.

  • Click Ok to close the Scale Designer.
  • Click Ok to close the Visual Gauge Control Designer.

Expanded Step 5. Result

  • Run the website to see the result.

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