How to: Create a Circular Gauge

• Aug 01, 2019
• 3 minutes to read

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

In the example, a circular gauge is created using the ASPxGaugeControl.AddGauge method. The default elements (a scale, background layer, needle and spindle cap) are added to the circular gauge via the CircularGauge.AddDefaultElements method. Then, some of them are customized in a specific manner.

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() {
    // Creates a new instance of the ASPxGaugeControl class with default settings.
    ASPxGaugeControl gaugeControl = new ASPxGaugeControl();

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

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

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

    // Customizes 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);

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

    // Adds 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()
        ' Creates a new instance of the ASPxGaugeControl class with default settings.
        Dim gaugeControl As ASPxGaugeControl = New ASPxGaugeControl()

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

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

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

        ' Customizes 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)

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

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