Data Visualization ▸ Different Value Indicator Types

<div class="long-title"><h3>Power of Engines</h3></div>

@using DevExtreme.AspNet.Mvc.Builders;

@functions {
    CircularGaugeBuilder CreateGauge() {
        return Html.DevExtreme().CircularGauge()
            .Geometry(g => g
                .StartAngle(180)
                .EndAngle(0)
            )
            .Scale(s => s
                .StartValue(0)
                .EndValue(100)
                .TickInterval(50)
                .Label(l => l.CustomizeText(@"
                    function (arg) {
                        return arg.valueText + "" %"";
                    }
                "))
            );
    }
}

@(CreateGauge()
    .ID("rectangleNeedle")
    .Value(75)
    .ValueIndicator(i => i
        .Type(GaugeIndicatorType.RectangleNeedle)
        .Color("#9B870C")
    )
)

@(CreateGauge()
    .ID("twoColorNeedle")
    .Value(80)
    .ValueIndicator(i => i
        .Type(GaugeIndicatorType.TwoColorNeedle)
        .Color("#779ECB")
        .SecondColor("#734F96")
    )
)

@(CreateGauge()
    .ID("triangleNeedle")
    .Value(65)
    .ValueIndicator(i => i
        .Type(GaugeIndicatorType.TriangleNeedle)
        .Color("#8FBC8F")
    )
)

@(CreateGauge()
    .ID("rangebar")
    .Value(90)
    .ValueIndicator(i => i
        .Type(GaugeIndicatorType.RangeBar)
        .Color("#F05B41")
    )
)

@(CreateGauge()
    .ID("textCloud")
    .Value(70)
    .ValueIndicator(i => i
        .Type(GaugeIndicatorType.TextCloud)
        .Color("#483D8B")
    )
)

@(CreateGauge()
    .ID("triangleMarker")
    .Value(85)
    .ValueIndicator(i => i
        .Type(GaugeIndicatorType.TriangleMarker)
        .Color("#E0E33B")
    )
)

using DevExtreme.MVC.Demos.Models.SampleData;
using System.Collections.Generic;
using System.Web.Mvc;

namespace DevExtreme.MVC.Demos.Controllers {
    public class GaugesController : Controller {

        public ActionResult DifferentValueIndicatorTypes() {
            return View();
        }

    }
}

#chart-demo {
    width: 100%;
}

#rectangleNeedle, #twoColorNeedle, #triangleNeedle, #rangebar, #textCloud, #triangleMarker {
    display: inline-block;
}

#rectangleNeedle, #twoColorNeedle, #triangleNeedle {
    width: 33%;
}

#rangebar, #triangleMarker {
    width: 32%;
}

#textCloud {
    width: 35%;
    vertical-align: bottom;
}

.long-title h3 {
    font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;
    font-weight: 200;
    font-size: 28px;
    text-align: center;
    margin-bottom: 20px;
}