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