Skip to main content

Lesson 1 - Create a Circular Gauge

  • 2 minutes to read

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

The 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

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

This step describes the common actions required to add a Gauge control to your application.

  • Create a new ASP.NET Web Application project or open an existing one.
  • Add the ASPxGaugeControl component to your project. To do this, drag the ASPxGaugeControl item from the Visual Studio Toolbox (in the DX.22.2: Data & Analytics tab) to the form.

    Lesson_Add a Gauge

    This creates a new ASPxGaugeControl.

        <form id="form1" runat="server">
            <dx:ASPxGaugeControl ID="ASPxGaugeControl1" runat="server" Height="250px" 

Step 2. Run the Preset Manager

  • Click the Gauge’s smart tag and select Run Preset Manager.

    Lesson- Run Preset Manager

    This invokes the following wizard:

    Lesson-Preset Manager

    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).

Step 3. Load the Required Gauge Preset

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

    Do one of the following to load the gauge preset:

    • double-click the required preset in 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 technique.

    Lesson - Ice-Cold Zone preset

    The following gauge appears on the form.

    Lesson - Ice-Cold Gauge

Step 4. Customize Gauge Scales

  • Run the Visual Gauge Control Designer to access the gauge’s elements and customize their settings.

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

    Lesson - Invoke Customize Gauge

  • In the Gauge Designer, click the scale2 node to select the second scale, and use the Remove button to remove it.

    Lesson - Remove a Second Scale

  • Double-click the required gauge element to customize its settings on the right side of the Visual Gauge Control Designer, or click the element’s smart tag and select Run Designer as shown below.

    Lesson - Run Element Designer

  • Customize the Scale’s properties in the Scale Designer as shown below and click Ok.

    Lesson - Customize Scale

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

Step 5. Result

  • Run the website to see the result.

    Lesson - Result