Lesson 1 - Create a Circular Gauge

• Nov 23, 2022
• 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.25.2: Data & Analytics tab) to the form.

Step 2. Run the Preset Manager

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

Step 3. Load the Required Gauge Preset

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

Step 4. Customize Gauge Scales

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

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

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

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

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