Your search did not match any results.
Gauges

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.
@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(10) ) .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(10) ) .Value(20) .Size(s => s .Width(90) .Height(90) ) .ValueIndicator(v => v.Color("#f05b41")) ) </div> <div class="center-section"> <div class="speed-value"> <span>40</span> </div> @(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 .Type(GaugeIndicatorType.TwoColorNeedle) .Color("transparent") .SecondFraction(0.24) .SecondColor("#f05b41") ) ) @(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(10) ) .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(10) ) .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.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/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; } .speed-value { position: absolute; border: 2px solid #f05b41; border-radius: 50%; width: 110px; height: 110px; left: 28%; top: 36%; line-height: 100px; } .speed-value > span { font-size: 50px; font-weight: lighter; color: #f05b41; } #fuel-gauge { position: absolute; left: 34%; bottom: 5%; } #slider { position: relative; top: -105px; margin: 0 auto; } #slider .dx-slider-handle { background-color: #f05b41; border: none; width: 10px; height: 20px; margin-top: -10px; } #slider .dx-slider-range.dx-slider-range-visible { border-color: #f05b41; background-color: #f05b41; }