Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss
Your search did not match any results.
Gauges

Update Linear Gauge Data at Runtime

Documentation

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

@model IEnumerable<DevExtreme.MVC.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("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) .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.MVC.Demos.Models.SampleData; using System.Collections.Generic; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class GaugesController : Controller { public ActionResult UpdateLinearGaugeDataAtRuntime() { return View(SampleData.GaugeCitiesData); } } }
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace DevExtreme.MVC.Demos.Models { public class City { public string Name { get; set; } public int ID { get; set; } public ClimateData Data { get; set; } } }
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace DevExtreme.MVC.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.MVC.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; }