<div class="long-title"><h3>Sampling by Goods</h3></div>
<div id="gauge-demo">
@(Html.DevExtreme().BarGauge()
.ID("gauge")
.StartValue(0)
.EndValue(50)
.Values(new JS("productsToValues()"))
.Label(l => l.Format(f => f
.Type(Format.FixedPoint)
.Precision(0)
))
)
<div id="panel">
@foreach(var product in Model) {
@(Html.DevExtreme().CheckBox()
.Value(product.Active)
.Text(product.Name)
.OnValueChanged("checkBox_valueChanged")
)
}
</div>
</div>
<script>
var products = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model));
var productsToValues = function() {
return $.map(products, function(item) {
return item.Active ? item.Count : null;
});
};
var checkBox_valueChanged = function(e) {
var currentProduct = products.filter(function(product) {
return product.Name === e.component.option("text");
})[0];
currentProduct.Active = e.value;
$("#gauge").dxBarGauge("option", "values", productsToValues());
};
</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 VariableNumberOfBars() {
return View(SampleData.GaugeProducts);
}
}
}
namespace DevExtreme.MVC.Demos.Models {
public class GaugeProduct {
public string Name { get; set; }
public int Count { get; set; }
public bool Active { get; set; }
}
}
using System.Collections.Generic;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<GaugeProduct> GaugeProducts = new[] {
new GaugeProduct {
Name = "Hammers",
Count = 41,
Active = true
},
new GaugeProduct {
Name = "Shovels",
Count = 32,
Active = true
},
new GaugeProduct {
Name = "Ladders",
Count = 13,
Active = true
},
new GaugeProduct {
Name = "Watering cans",
Count = 48,
Active = true
},
new GaugeProduct {
Name = "Screwdrivers",
Count = 24,
Active = true
},
new GaugeProduct {
Name = "Nail pullers",
Count = 8,
Active = true
},
new GaugeProduct {
Name = "Drills",
Count = 19,
Active = true
}
};
}
}
#gauge-demo {
height: 440px;
width: 100%;
}
#gauge {
width: 80%;
height: 100%;
margin-top: 20px;
float: left;
}
#panel {
width: 150px;
text-align: left;
margin-top: 20px;
float: left;
}
.dx-checkbox {
margin-bottom: 10px;
display: block;
}
.long-title h3 {
font-weight: 200;
font-size: 28px;
text-align: center;
margin-bottom: 20px;
}