Gauges - Different Subvalue Indicator Types

This demo illustrates all the available subvalue indicator types for the CircularGauge.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

<div class="long-title"><h3>Grades of Goods</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(10) .TickInterval(1) ); } } <div id="gauge-demo"> @(CreateGauge() .ID("triangleMarker") .Value(8) .Subvalues(new double[] { 2, 8 }) .SubvalueIndicator(i => i .Type(GaugeIndicatorType.TriangleMarker) .Color("#8FBC8F") ) ) @(CreateGauge() .ID("rectangleNeedle") .Value(9) .Subvalues(new double[] { 2,8 }) .SubvalueIndicator(i => i .Type(GaugeIndicatorType.RectangleNeedle) .Color("#9B870C") ) ) @(CreateGauge() .ID("triangleNeedle") .Value(5) .Subvalues(new double[] { 2, 8 }) .SubvalueIndicator(i => i .Type(GaugeIndicatorType.TriangleNeedle) .Color("#779ECB") ) ) @(CreateGauge() .ID("textCloud") .Value(6) .Subvalues(new double[] { 2, 8 }) .SubvalueIndicator(i => i .Type(GaugeIndicatorType.TextCloud) .Color("#F05B41") ) ) @(CreateGauge() .ID("twoColorNeedle") .Value(4) .Subvalues(new double[] { 2, 8 }) .SubvalueIndicator(i => i .Type(GaugeIndicatorType.TwoColorNeedle) .Color("#779ECB") .SecondColor("#734F96") ) ) </div>

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 DifferentSubvalueIndicatorTypes() { return View(); } } }

#gauge-demo { width: 100%; text-align: center; } #triangleMarker, #rectangleNeedle, #triangleNeedle, #textCloud, #twoColorNeedle { display: inline-block; } #triangleMarker, #rectangleNeedle, #triangleNeedle { width: 33%; } #twoColorNeedle { width: 31%; } #textCloud { width: 37%; 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; }