Your search did not match any results.

Gauges - Overview

DevExtreme ASP.NET Core Gauges is a set of interactive jQuery-powered client-side components for dashboards. DevExtreme ships circular and linear gauges. Their key features include multiple animated value indicators, shape customization, scale adjustment, theming support, and more. You can configure each component with Razor C# syntax to use them in Razor Pages.

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-value > span").text(e.value); $("#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.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; namespace DevExtreme.NETCore.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; }