Your search did not match any results.
Gauges

Overview

@using DevExtreme.AspNet.Mvc.Builders; @functions { CircularGaugeBuilder CreateGauge() { return Html.DevExtreme().CircularGauge() .Geometry(g => g .StartAngle(180) .EndAngle(0) ) .Scale(s => s .StartValue(0) .EndValue(10) .TickInterval(1) ); } } <div id="gauge-demo"> @(CreateGauge() .ID("circular-gauge-one") .Value(9) .Subvalues(new double[] { 2,8 }) .SubvalueIndicator(i => i .Type(GaugeIndicatorType.RectangleNeedle) .Color("#9B870C") ) ) @(CreateGauge() .ID("circular-gauge-two") .Value(4) .Subvalues(new double[] { 2, 8 }) .SubvalueIndicator(i => i .Type(GaugeIndicatorType.TwoColorNeedle) .Color("#779ECB") .SecondColor("#734F96") ) ) @(CreateGauge() .ID("circular-gauge-three") .Value(5) .Subvalues(new double[] { 2, 8 }) .SubvalueIndicator(i => i .Type(GaugeIndicatorType.TriangleNeedle) .Color("#779ECB") ) ) @(Html.DevExtreme().BarGauge() .ID("bar-gauge-one") .StartValue(0) .EndValue(100) .Values(new [] { 47.27, 65.32, 84.59, 71.86 }) .Label(l => l .Indent(30) .Format(f => f.Type(Format.FixedPoint).Precision(1)) .CustomizeText(@<text> function (arg) { return arg.valueText + " %"; } </text>) ) ) @(Html.DevExtreme().BarGauge() .ID("bar-gauge-two") .StartValue(-50) .EndValue(50) .BaseValue(0) .Values(new[] { -21.3, 14.8, -30.9, 45.2 }) .Label(l => l.CustomizeText(@<text> function (arg) { return arg.valueText + " mm"; } </text>)) .Palette(VizPalette.Ocean) ) </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 { width: 100%; text-align: center; } #gauge-demo > div { display: inline-block; } #circular-gauge-one, #circular-gauge-two, #circular-gauge-three { width: 33%; } #bar-gauge-one, #bar-gauge-two { width: 49%; }