Your search did not match any results.

Overview

DevExtreme ASP.NET MVC Gauges are jQuery-powered server-side controls for visualizing data on dashboards. They come in two geometric shapes - circular, or radial, and linear - and provide a comprehensive set of features including multiple animated value indicators, geometry customization, interactive tooltips, palettes support, and many more. You can choose between Razor C# and Razor VB syntax and use lambda expressions when configuring gauges.

Backend API
@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; }