Skip to main content

How to: Create a State Indicator Gauge

  • 2 minutes to read

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

CreateStateIndicatorGauge_ex

using DevExpress.Web.ASPxGauges;
using DevExpress.Web.ASPxGauges.Base;
using DevExpress.XtraGauges.Core.Model;
using DevExpress.XtraGauges.Core.Base;
using DevExpress.Web.ASPxGauges.Gauges.State;
using DevExpress.XtraGauges.Base;

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

private void CreateStateIndicatorGauge() {
    // Creates a new instance of the ASPxGaugeControl class
    // with default settings.
    ASPxGaugeControl gaugeControl = new ASPxGaugeControl();
    // Create a new instance of the StateIndicatorGauge class
    // and add it to the gauge control's Gauges collection.
    StateIndicatorGauge siGauge =
              (StateIndicatorGauge)gaugeControl.AddGauge(GaugeType.StateIndicator);
    StateIndicatorComponent stateIndicator = siGauge.AddIndicator();
    // Add states.
    StateIndicatorShapeType[] shapes = new StateIndicatorShapeType[] {
                    StateIndicatorShapeType.TrafficLight1,
                    StateIndicatorShapeType.TrafficLight2,
                    StateIndicatorShapeType.TrafficLight3,
                    StateIndicatorShapeType.TrafficLight4 };
    stateIndicator.States.Clear();
    foreach (StateIndicatorShapeType shape in shapes) {
        IndicatorStateWeb state = new IndicatorStateWeb();
        state.ShapeType = shape;
        stateIndicator.States.Add(state);
    }
    // Set the current state.
    stateIndicator.StateIndex = 1;
    // Set the indicator's size.
    stateIndicator.Size = new SizeF(100, 200);
    // Add the gauge control to the Page.
    gaugeControl.Width = 250;
    gaugeControl.Height = 250;
    gaugeControl.AutoLayout = true;
    Page.Form.Controls.Add(gaugeControl);
}