Gauges - Linear Gauge

This demo illustrates data binding in the LinearGauge component. The bound data changes when a user selects a new location in the City drop-down menu.

Backend API

​x
 
@model IEnumerable<DevExtreme.NETCore.Demos.Models.City>​@{ var firstCity = Model.First(); }​<div class="long-title"><h3>Weather Indicators</h3></div><div id="gauge-demo">    @(Html.DevExtreme().LinearGauge()        .ID("temperatureGauge")        .ElementAttr(new { @class = "gauge-element" })        .Title(t => t            .Text("Temperature (°C)")            .Font(f => f.Size(16))        )        .Geometry(g => g.Orientation(Orientation.Vertical))        .Scale(s => s            .StartValue(-40)            .EndValue(40)            .TickInterval(40)        )        .RangeContainer(rc => rc            .BackgroundColor("none")            .Ranges(r => {                r.Add().StartValue(-40).EndValue(0).Color("#679EC5");                r.Add().StartValue(0).EndValue(40);            })        )        .Value(firstCity.Data.Temperature)    )    @(Html.DevExtreme().LinearGauge()        .ID("humidityGauge")        .ElementAttr("class", "gauge-element")        .Title(t => t            .Text("Humidity (%)")            .Font(f => f.Size(16))        )        .Geometry(g => g.Orientation(Orientation.Vertical))        .Scale(s => s            .StartValue(0)            .EndValue(100)            .TickInterval(10)        )        .RangeContainer(rc => rc.BackgroundColor("#CACACA"))        .ValueIndicator(vi => vi            .Type(GaugeIndicatorType.Rhombus)            .Color("#A4DDED")        )        .Value(firstCity.Data.Humidity)    )    @(Html.DevExtreme().LinearGauge()        .ID("pressureGauge")        .ElementAttr("class", "gauge-element")        .Title(t => t            .Text("Barometric Pressure (mb)")            .Font(f => f.Size(16))        )        .Geometry(g => g.Orientation(Orientation.Vertical))        .Scale(s => s            .StartValue(900)            .EndValue(1100)            .CustomTicks(new double[] { 900, 1000, 1020, 1100 })            .Label(l=>l.Format("decimal"))        )        .RangeContainer(rc => rc            .Ranges(r => {                r.Add().StartValue(900).EndValue(1000).Color("#679EC5");                r.Add().StartValue(1000).EndValue(1020).Color("#A6C567");                r.Add().StartValue(1020).EndValue(1100).Color("#E18E92");            })        )        .ValueIndicator(vi => vi            .Type(GaugeIndicatorType.Circle)            .Color("#E3A857")        )        .Value(firstCity.Data.Pressure)    )</div>@(Html.DevExtreme().SelectBox()    .ID("selectbox")    .DataSource(Model)    .InputAttr("aria-label", "City")    .DisplayExpr("Name")    .ValueExpr("ID")    .Value(firstCity.ID)    .OnSelectionChanged(@<text>        function(e) {            var weatherData = e.selectedItem.Data,                temperatureGauge = $("#temperatureGauge").dxLinearGauge("instance"),                humidityGauge = $("#humidityGauge").dxLinearGauge("instance"),                pressureGauge = $("#pressureGauge").dxLinearGauge("instance");​            temperatureGauge.option("value", weatherData.Temperature);            humidityGauge.option("value", weatherData.Humidity);            pressureGauge.option("value", weatherData.Pressure);        }    </text>))​

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

xxxxxxxxxx
 
using System;using System.Linq;​namespace DevExtreme.NETCore.Demos.Models {    public class City {        public string Name { get; set; }        public int ID { get; set; }        public ClimateData Data { get; set; }    }}​

xxxxxxxxxx
 
using System;using System.Linq;​namespace DevExtreme.NETCore.Demos.Models {    public class ClimateData {        public int Temperature { get; set; }        public int Humidity { get; set; }        public double Pressure { get; set; }    }}​

xxxxxxxxxx
 
using System;using System.Collections.Generic;using System.Linq;​namespace DevExtreme.NETCore.Demos.Models.SampleData {    public partial class SampleData {        public static readonly IEnumerable<City> GaugeCitiesData = new[] {            new City {                Name = "London",                ID = 1,                Data = new ClimateData {                    Temperature = 10,                    Humidity = 81,                    Pressure = 1002.1                }            },            new City {                Name = "Berlin",                ID = 2,                Data = new ClimateData {                    Temperature = 14,                    Humidity = 58,                    Pressure = 1008.5                }            },            new City {                Name = "New York",                ID = 3,                Data = new ClimateData {                    Temperature = 3,                    Humidity = 89,                    Pressure = 1016.2                }            },            new City {                Name = "Moscow",                ID = 4,                Data = new ClimateData {                    Temperature = 2,                    Humidity = 51,                    Pressure = 1016.5                }            },            new City {                Name = "Bangkok",                ID = 5,                Data = new ClimateData {                    Temperature = 37,                    Humidity = 39,                    Pressure = 1007.0                }            }        };    }}​

xxxxxxxxxx
 
#gauge-demo {    width: 90%;    margin: 0 auto}​#gauge-demo .gauge-element {    height: 400px;    width: 33%;    float: left;}​.dx-selectbox {    margin: 10px auto 0;    width: 200px;}​#gauge-demo::after{    content: ".";    display: block;    clear: both;    visibility: hidden;    line-height: 0;    height: 0;}​.long-title h3 {    font-weight: 200;    font-size: 28px;    text-align: center;    margin-bottom: 20px;}​