Your search did not match any results.

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
@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>) )
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); } } }
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; } } }
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; } } }
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 } } }; } }
#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; }