Your search did not match any results.
Gauges

Update Linear Gauge Data at Runtime

Documentation
This demo illustrates data binding in the LinearGauge widget. The bound data changes when a user selects a new location in the City drop-down menu.
@model List<DevExtreme.MVC.Demos.Models.City> <div class="long-title"><h3>Weather Indicators</h3></div> <div id="gauge-demo"> @(Html.DevExtreme().LinearGauge() .ID("temperatureGauge") .ElementAttr(new Dictionary<string, object> { { "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(Model[0].Data.Temperature) ) @(Html.DevExtreme().LinearGauge() .ID("humidityGauge") .ElementAttr(new Dictionary<string, object> { { "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(Model[0].Data.Humidity) ) @(Html.DevExtreme().LinearGauge() .ID("pressureGauge") .ElementAttr(new Dictionary<string, object> { { "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 }) ) .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(Model[0].Data.Pressure) ) @(Html.DevExtreme().SelectBox() .ID("selectbox") .DataSource(Model) .DisplayExpr("Name") .ValueExpr("ID") .Value(Model[0].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>) ) </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 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 List<City> GaugeCitiesData = new List<City> { 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 { height: 440px; width: 100%; } #gauge-demo .gauge-element { height: 100%; width: 30%; float: left; } #gauge-demo .dx-selectbox { float: right; } .long-title h3 { font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana; font-weight: 200; font-size: 28px; text-align: center; margin-bottom: 20px; }