Gauges - Circular Gauge

This demo illustrates how to bind an array of subvalues to the CircularGauge. Since an array can not be bound to a field as a regular value, it is bound as a computed one.

Backend API

@model IEnumerable<DevExtreme.NETCore.Demos.Models.Season> @{ var firstSeason = Model.First(); } <div id="gauge-demo"> @(Html.DevExtreme().CircularGauge() .ID("gauge") .Scale(s => s .StartValue(10) .EndValue(40) .TickInterval(5) .Label(l => l.CustomizeText(@<text> function (arg) { return arg.valueText + " °C"; } </text>)) ) .RangeContainer(rc => rc .Ranges(r => { r.Add().StartValue(10).EndValue(20).Color("#0077BE"); r.Add().StartValue(20).EndValue(30).Color("#E6E200"); r.Add().StartValue(30).EndValue(40).Color("#77DD77"); }) ) .Tooltip(t => t.Enabled(true)) .Title(t => t .Text("Temperature in the Greenhouse") .Font(f => f.Size(28)) ) .Value(firstSeason.Mean) .Subvalues(new double[] { firstSeason.Min, firstSeason.Max }) ) @(Html.DevExtreme().SelectBox() .ID("seasons") .Width(150) .DataSource(Model) .InputAttr("aria-label", "Season") .DisplayExpr("Name") .ValueExpr("Name") .Value(firstSeason.Name) .OnSelectionChanged(@<text> function(e) { var gauge = $("#gauge").dxCircularGauge("instance"); gauge.option("value", e.selectedItem.Mean); gauge.option("subvalues", [e.selectedItem.Min, e.selectedItem.Max]); } </text>) ) </div>

using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; namespace DevExtreme.NETCore.Demos.Controllers { public class GaugesController : Controller { public ActionResult CircularGauge() { return View(SampleData.GaugeSeasonsData); } } }

using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static readonly IEnumerable<Season> GaugeSeasonsData = new[] { new Season { Name = "Summer", Mean = 35, Min = 28, Max = 38 }, new Season { Name = "Autumn", Mean = 24, Min = 20, Max = 32 }, new Season { Name = "Winter", Mean = 18, Min = 16, Max = 23 }, new Season { Name = "Spring", Mean = 27, Min = 18, Max = 31 } }; } }

using System; using System.Linq; namespace DevExtreme.NETCore.Demos.Models { public class Season { public string Name { get; set; } public int Mean { get; set; } public int Min { get; set; } public int Max { get; set; } } }

#gauge-demo { height: 440px; width: 100%; } #gauge { width: 80%; height: 100%; float: left; } #seasons { width: 20%; float: left; text-align: left; margin-top: 20px; }