@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)
.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 UpdateLinearGaugeDataAtRuntime() {
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;
}