Data Visualization ▸ Circular Gauge

@model IEnumerable<DevExtreme.MVC.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)
        .InputAttr("aria-label", "Season")
        .DataSource(Model)
        .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.MVC.Demos.Models.SampleData;
using System.Collections.Generic;
using System.Web.Mvc;

namespace DevExtreme.MVC.Demos.Controllers {
    public class GaugesController : Controller {

        public ActionResult CircularGauge() {
            return View(SampleData.GaugeSeasonsData);
        }

    }
}

using System;
using System.Collections.Generic;

namespace DevExtreme.MVC.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.MVC.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;
}