DevExtreme ASP.NET MVC Gauges are jQuery-powered client-side controls for dashboards. They come in two shapes: circular and linear. Features include multiple animated value indicators, geometry customization, interactive tooltips, palette options, and more. You can configure the controls with Razor C# syntax.
This demo shows a simple dashboard with multiple customized gauges.
@using DevExtreme.AspNet.Mvc.Builders;
<div id="gauge-demo">
<div id="gauge-container">
<div class="left-section">
@(Html.DevExtreme().CircularGauge()
.ID("coolant-gauge")
.Geometry(g => g
.StartAngle(180)
.EndAngle(90)
)
.Scale(s => s
.StartValue(0)
.EndValue(100)
.TickInterval(50)
)
.Value(20)
.Size(s => s
.Width(90)
.Height(90)
)
.ValueIndicator(v => v.Color("#f05b41"))
)
@(Html.DevExtreme().CircularGauge()
.ID("rpm-gauge")
.Geometry(g => g
.StartAngle(-90)
.EndAngle(-180)
)
.Scale(s => s
.StartValue(100)
.EndValue(0)
.TickInterval(50)
)
.Value(20)
.Size(s => s
.Width(90)
.Height(90)
)
.ValueIndicator(v => v.Color("#f05b41"))
)
</div>
<div class="center-section">
@(Html.DevExtreme().CircularGauge()
.ID("speed-gauge")
.Geometry(g => g
.StartAngle(225)
.EndAngle(315)
)
.Scale(s => s
.StartValue(20)
.EndValue(200)
.TickInterval(20)
.MinorTickInterval(10)
)
.Value(40)
.Size(s => s.Width(260))
.ValueIndicator(v => v
.IndentFromCenter(55)
.Color("#f05b41")
.SpindleSize(0)
.SpindleGapSize(0)
)
.CenterTemplate(@<text>
<svg>
<circle cx="100" cy="100" r="55" stroke-width="2" stroke="#f05b41" fill="transparent"></circle>
<text text-anchor="middle" alignment-baseline="middle" y="100" x="100" font-size="50" font-weight="lighter" fill="#f05b41">"<%- value() %>"</text>
</svg>
</text>)
)
@(Html.DevExtreme().LinearGauge()
.ID("fuel-gauge")
.Scale(s => s
.StartValue(0)
.EndValue(50)
.TickInterval(25)
.MinorTickInterval(12.5)
.MinorTick(mt => mt.Visible(true))
.Label(l => l.Visible(false))
)
.Value(40.4)
.Size(s => s
.Width(90)
.Height(20)
)
.ValueIndicator(v => v
.Color("#f05b41")
.Size(8)
.Offset(7)
)
)
</div>
<div class="right-section">
@(Html.DevExtreme().CircularGauge()
.ID("psi-gauge")
.Geometry(g => g
.StartAngle(90)
.EndAngle(0)
)
.Scale(s => s
.StartValue(100)
.EndValue(0)
.TickInterval(50)
)
.Value(20)
.Size(s => s
.Width(90)
.Height(90)
)
.ValueIndicator(v => v.Color("#f05b41"))
)
@(Html.DevExtreme().CircularGauge()
.ID("instant-fuel-gauge")
.Geometry(g => g
.StartAngle(0)
.EndAngle(-90)
)
.Scale(s => s
.StartValue(0)
.EndValue(100)
.TickInterval(50)
)
.Value(20)
.Size(s => s
.Width(90)
.Height(90)
)
.ValueIndicator(v => v.Color("#f05b41"))
)
</div>
</div>
@(Html.DevExtreme().Slider()
.ID("slider")
.Min(0)
.Max(200)
.Value(40)
.Width(155)
.OnValueChanged(@<text>
function(e) {
var gauges = ["coolant", "psi", "rpm", "instant-fuel"];
$("#speed-gauge").dxCircularGauge("instance").value(e.value);
gauges.forEach(function(gaugeName) {
$("#" + gaugeName + "-gauge").dxCircularGauge("instance").value(e.value / 2);
});
$("#fuel-gauge").dxLinearGauge("instance").value(50 - e.value * 0.24);
}
</text>)
)
</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 Overview() {
return View();
}
}
}#gauge-demo {
height: 500px;
}
#gauge-container {
text-align: center;
margin: 20px auto;
background-image: url('../../Images/Gauges/mask.png');
background-repeat: no-repeat;
width: 786px;
height: 500px;
}
#gauge-container > div {
display: inline-block;
vertical-align: bottom;
position: relative;
}
.left-section {
top: -20px;
left: -40px;
}
.center-section {
top: 25px;
}
.right-section {
top: -20px;
right: -40px;
}
#fuel-gauge {
position: absolute;
left: 34%;
bottom: 5%;
}
#slider {
position: relative;
top: -105px;
margin: 0 auto;
}
#slider .dx-slider-bar {
background-color: #fff;
}
#slider .dx-slider-handle {
background-color: #f05b41;
width: 16px;
height: 16px;
margin-top: -8px;
margin-right: -8px;
border-radius: 50%;
border: none;
}
#slider .dx-slider-handle .dx-inkripple-wave {
background: none;
}
#slider .dx-slider-handle:after {
background-color: #f05b41;
}
#slider .dx-slider-range.dx-slider-range-visible {
border-color: #f05b41;
background-color: #f05b41;
}