@model IEnumerable<DevExtreme.MVC.Demos.Models.Season>
@{ var firstSeason = Model.First(); }
<div id="gauge-demo">
@(Html.DevExtreme().CircularGauge()
.ID("gauge")
.Scale(s => s
.StartValue(10)
.EndValue(40)
.TickInterval(5)
.Label(l => l.CustomizeText(@<text>
function (arg) {
return arg.valueText + " °C";
}
</text>))
)
.RangeContainer(rc => rc
.Ranges(r => {
r.Add().StartValue(10).EndValue(20).Color("#0077BE");
r.Add().StartValue(20).EndValue(30).Color("#E6E200");
r.Add().StartValue(30).EndValue(40).Color("#77DD77");
})
)
.Tooltip(t => t.Enabled(true))
.Title(t => t
.Text("Temperature in the Greenhouse")
.Font(f => f.Size(28))
)
.Value(firstSeason.Mean)
.Subvalues(new double[] { firstSeason.Min, firstSeason.Max })
)
@(Html.DevExtreme().SelectBox()
.ID("seasons")
.Width(150)
.DataSource(Model)
.DisplayExpr("Name")
.ValueExpr("Name")
.Value(firstSeason.Name)
.OnSelectionChanged(@<text>
function(e) {
var gauge = $("#gauge").dxCircularGauge("instance");
gauge.option("value", e.selectedItem.Mean);
gauge.option("subvalues", [e.selectedItem.Min, e.selectedItem.Max]);
}
</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 UpdateCircularGaugeDataAtRuntime() {
return View(SampleData.GaugeSeasonsData);
}
}
}
using System;
using System.Collections.Generic;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<Season> GaugeSeasonsData = new[] {
new Season {
Name = "Summer",
Mean = 35,
Min = 28,
Max = 38
},
new Season {
Name = "Autumn",
Mean = 24,
Min = 20,
Max = 32
},
new Season {
Name = "Winter",
Mean = 18,
Min = 16,
Max = 23
},
new Season {
Name = "Spring",
Mean = 27,
Min = 18,
Max = 31
}
};
}
}
using System;
using System.Linq;
namespace DevExtreme.MVC.Demos.Models {
public class Season {
public string Name { get; set; }
public int Mean { get; set; }
public int Min { get; set; }
public int Max { get; set; }
}
}
#gauge-demo {
height: 440px;
width: 100%;
}
#gauge {
width: 80%;
height: 100%;
float: left;
}
#seasons {
width: 20%;
float: left;
text-align: left;
margin-top: 20px;
}