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

​x
 
@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>​

xxxxxxxxxx
 
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);        }    }}

xxxxxxxxxx
 
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            }        };    }}​

xxxxxxxxxx
 
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; }    }}​

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