How to: Create a Circular Gauge

• Jul 26, 2021
• 3 minutes to read

This example shows how to create a circular gauge in code. The image below shows the result:

This example uses the ASPxGaugeControl.AddGauge method to create a circular gauge. The CircularGauge.AddDefaultElements method adds the default elements (a scale, background layer, needle and spindle cap) to the circular gauge. The example also illustrates how to customize the gauge elements.

C#

using System.Drawing;
using DevExpress.Web.ASPxGauges;
using DevExpress.Web.ASPxGauges.Base;
using DevExpress.XtraGauges.Core.Drawing;
using DevExpress.XtraGauges.Core.Model;
using DevExpress.XtraGauges.Core.Base;
using DevExpress.Web.ASPxGauges.Gauges.Circular;
using DevExpress.XtraGauges.Base;

protected void Page_Load(object sender, EventArgs e) {
    if (!IsPostBack)
        CreateCircularGauge();
}

private void CreateCircularGauge() {
    // Create a new instance of the ASPxGaugeControl class with default settings.
    ASPxGaugeControl gaugeControl = new ASPxGaugeControl();

    // Create a new instance of the CircularGauge class
    // and add it to the gauge control's Gauges collection.
    CircularGauge circularGauge = (CircularGauge)gaugeControl.AddGauge(GaugeType.Circular);

    // Add the default elements (a scale, background layer, needle, and spindle cap).
    circularGauge.AddDefaultElements();

    // Change the background layer's paint style.
    ArcScaleBackgroundLayer background = circularGauge.BackgroundLayers[0];
    background.ShapeType = BackgroundLayerShapeType.CircularFull_Style2;

    // Customize the scale's settings.
    ArcScaleComponent scale = circularGauge.Scales[0];
    scale.MinValue = 0;
    scale.MaxValue = 100;
    scale.Value = 25;
    scale.MajorTickCount = 6;
    scale.MajorTickmark.FormatString = "{0:F0}";
    scale.MajorTickmark.ShapeType = TickmarkShapeType.Circular_Style1_2;
    scale.MajorTickmark.ShapeOffset = -9;
    scale.MajorTickmark.AllowTickOverlap = true;
    scale.MinorTickCount = 3;
    scale.MinorTickmark.ShapeType = TickmarkShapeType.Circular_Style2_1;
    scale.AppearanceTickmarkText.TextBrush = new SolidBrushObject(Color.Gray);

    // Change the needle's paint style.
    ArcScaleNeedleComponent needle = circularGauge.Needles[0];
    needle.ShapeType = NeedleShapeType.CircularFull_Style3;

    // Add the gauge control to the Page.
    gaugeControl.Width = 250;
    gaugeControl.Height = 250;
    gaugeControl.AutoLayout = true;
    Page.Form.Controls.Add(gaugeControl);
}

VB.NET

Imports System.Drawing
Imports DevExpress.Web.ASPxGauges
Imports DevExpress.Web.ASPxGauges.Base
Imports DevExpress.XtraGauges.Base
Imports DevExpress.XtraGauges.Core.Drawing
Imports DevExpress.XtraGauges.Core.Model
Imports DevExpress.XtraGauges.Core.Base
Imports DevExpress.Web.ASPxGauges.Gauges.Circular

Partial Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            CreateCircularGauge()
        End If
    End Sub

    Private Sub CreateCircularGauge()
        ' Create a new instance of the ASPxGaugeControl class with default settings.
        Dim gaugeControl As ASPxGaugeControl = New ASPxGaugeControl()

        ' Create a new instance of the CircularGauge class 
        ' and add it to the gauge control's Gauges collection.
        Dim circularGauge As CircularGauge = gaugeControl.AddGauge(GaugeType.Circular)

        ' Add the default elements (a scale, background layer, needle, and spindle cap).
        circularGauge.AddDefaultElements()

        ' Change the background layer's paint style.
        Dim background As ArcScaleBackgroundLayer = circularGauge.BackgroundLayers(0)
        background.ShapeType = BackgroundLayerShapeType.CircularFull_Style2

        ' Customize the scale's settings.
        Dim scale As ArcScaleComponent = circularGauge.Scales(0)
        scale.MinValue = 0
        scale.MaxValue = 100
        scale.Value = 25
        scale.MajorTickCount = 6
        scale.MajorTickmark.FormatString = "{0:F0}"
        scale.MajorTickmark.ShapeType = TickmarkShapeType.Circular_Style1_2
        scale.MajorTickmark.ShapeOffset = -9
        scale.MajorTickmark.AllowTickOverlap = True
        scale.MinorTickCount = 3
        scale.MinorTickmark.ShapeType = TickmarkShapeType.Circular_Style2_1
        scale.AppearanceTickmarkText.TextBrush = New SolidBrushObject(Color.Gray)

        ' Change the needle's paint style.
        Dim needle As ArcScaleNeedleComponent = circularGauge.Needles(0)
        needle.ShapeType = NeedleShapeType.CircularFull_Style3

        ' Add the gauge control to the Page.
        gaugeControl.Width = 250
        gaugeControl.Height = 250
        gaugeControl.AutoLayout = True
        Page.Form.Controls.Add(gaugeControl)
    End Sub
End Class