<div class="long-title"><h3>Current Price (with Min and Max)</h3></div>
@using DevExtreme.AspNet.Mvc.Builders;
@functions {
LinearGaugeBuilder CreateGauge() {
return Html.DevExtreme().LinearGauge()
.Scale(s => s
.StartValue(10)
.EndValue(50)
.TickInterval(10)
.Label(l => l.CustomizeText(@"
function (arg) {
return ""$"" + arg.valueText;
}
"))
);
}
}
<div id="gauge-demo">
@(CreateGauge()
.ID("c1")
.Value(24)
.Subvalues(new double[] { 18, 43})
.SubvalueIndicator(i => i
.Type(GaugeIndicatorType.Rectangle)
.Color("#9B870C")
)
)
@(CreateGauge()
.ID("c2")
.Value(38)
.Subvalues(new double[] { 18, 43 })
.SubvalueIndicator(i => i
.Type(GaugeIndicatorType.Rhombus)
.Color("#779ECB")
)
)
@(CreateGauge()
.ID("c3")
.Value(21)
.Subvalues(new double[] { 18, 43 })
.SubvalueIndicator(i => i
.Type(GaugeIndicatorType.Circle)
.Color("#8FBC8F")
)
)
@(CreateGauge()
.ID("c4")
.Value(42)
.Subvalues(new double[] { 18, 43 })
.SubvalueIndicator(i => i
.Type(GaugeIndicatorType.TextCloud)
.Color("#734F96")
)
)
@(CreateGauge()
.ID("c5")
.Value(28)
.Subvalues(new double[] { 18, 43 })
.SubvalueIndicator(i => i
.Type(GaugeIndicatorType.TriangleMarker)
.Color("#f05b41")
)
)
</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 DifferentSubvalueIndicatorTypesLinearGauge() {
return View();
}
}
}
#gauge-demo {
text-align: center;
width: 100%;
}
#c1, #c2, #c3, #c4, #c5 {
height: 110px;
}
.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;
}