Backend API
@model IEnumerable<DevExtreme.MVC.Demos.Models.SubvalueIndicator> @{ var firstIndicator = Model.First(); } <div id="gauge-demo"> @(Html.DevExtreme().LinearGauge() .ID("gauge") .Scale(s => s .StartValue(0) .EndValue(10) .TickInterval(2) .Label(l => l.CustomizeText(@<text> function (arg) { return arg.valueText + " kW"; } </text>)) ) .Tooltip(t => t .Enabled(true) .CustomizeTooltip(@<text> function (arg) { var result = arg.valueText + " kW"; if(arg.index >= 0) { result = "Secondary " + (arg.index + 1) + ": " + result; } else { result = "Primary: " + result; } return { text: result }; } </text>) ) .Export(e => e.Enabled(true)) .Title(t => t .Text("Power of Air Conditioners in Store Departments (kW)") .Font(f => f.Size(28)) ) .Value(firstIndicator.Primary) .Subvalues(firstIndicator.Secondary) ) @(Html.DevExtreme().SelectBox() .ID("selectbox") .InputAttr("aria-label", "Department") .DataSource(Model, "Name") .DisplayExpr("Name") .Value("Meat") .OnValueChanged("selectBox_OnValueChanged") .Width(200) ) </div> <script> function selectBox_OnValueChanged(data) { var instance = $('#gauge').dxLinearGauge('instance'); instance.value(data.value.Primary); instance.subvalues(data.value.Secondary); } </script>
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 SubvalueIndicatorsRuntimeCustomization() { return View(SampleData.SubvalueIndicators); } } }
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace DevExtreme.MVC.Demos.Models { public class SubvalueIndicator { public string Name { get; set; } public double Primary { get; set; } public double[] Secondary { get; set; } } }
using System; using System.Collections.Generic; namespace DevExtreme.MVC.Demos.Models.SampleData { public partial class SampleData { public static readonly IEnumerable<SubvalueIndicator> SubvalueIndicators = new[] { new SubvalueIndicator { Name = "Meat", Primary = 8, Secondary = new double[] { 7, 3 } }, new SubvalueIndicator { Name = "Fish", Primary = 7, Secondary = new double[] { 7, 5, 1 } }, new SubvalueIndicator { Name = "Grocery", Primary = 5, Secondary = new double[] { 1, 3 } }, new SubvalueIndicator { Name = "Greengrocery", Primary = 3, Secondary = new double[] { 1 } }, new SubvalueIndicator { Name = "Stationery", Primary = 2, Secondary = new double[] { } } }; } }
#gauge-demo { height: 440px; width: 100%; } #gauge { height: 400px; }