Your search did not match any results.
Range Selector

Discrete scale

Documentation
In this demo, a discrete scale is used to select a range within a set of categories.
<div class="demo-container"> <div id="range-selector-demo"> @(Html.DevExtreme().RangeSelector() .ID("range") .Size(s => s.Height(200)) .Chart(c => { c.CommonSeriesSettings(css => { css.ArgumentField("country"); css.Type(SeriesType.Bar); }); c.Series(s => s.Add().ValueField("copper").Name("copper")); }) .Title("Copper Production in 2013") .OnValueChanged("rangeSelector_OnValueChanged") .DataSource(new List<object>{ new { country = "Chile", copper = 5700000 }, new { country = "United States", copper = 1220000 }, new { country = "Peru", copper = 1300000 }, new { country = "China", copper = 1650000 }, new { country = "Australia", copper = 990000 }, new { country = "Russia", copper = 930000 }, new { country = "DR congo", copper = 900000 }, new { country = "Finland", copper = 119000 } }) ) <h2>Total: <span id="total">12,809,000</span> tons</h2> </div> </div> <script> function rangeSelector_OnValueChanged(e) { var data = e.component.getDataSource().items(), total = 0, startIndex, endIndex; $.each(data, function(i, item){ if (item.country == e.value[0] ) startIndex = i; else if (item.country == e.value[1]) endIndex = i; }); if(endIndex) { data .slice(startIndex, endIndex + 1) .forEach(function(item){ total += item.copper; }); } else { total = data[startIndex].copper; } $("#total").text(Globalize.formatNumber(total, { maximumFractionDigits: 0 })); } </script>
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.MVC.Demos.Models.SampleData; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class RangeSelectorController : Controller { public ActionResult DiscreteScale() { return View(); } } }
#range-selector-demo { height: 440px; width: 100%; text-align: center; }