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 id="range-selector-demo"> @(Html.DevExtreme().RangeSelector() .ID("range") .Size(s => s.Height(200)) .Chart(c => c .CommonSeriesSettings(css => css .ArgumentField("Country") .Type(SeriesType.Bar) ) .Series(s => s.Add().ValueField("Copper").Name("Copper")) ) .Title("Copper Production in 2013") .OnValueChanged("rangeSelector_valueChanged") .DataSource(Model, "Country") .Value(new[] {"Chile", "Finland" }) ) <h2>Total: <span id="total">12,809,000</span> tons</h2> </div> <script> function rangeSelector_valueChanged(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.Linq; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class RangeSelectorController : Controller { public ActionResult DiscreteScale() { return View(SampleData.CopperProductionData); } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.MVC.Demos.Models.SampleData { public partial class SampleData { public static List<object> CopperProductionData = 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 } }; } }
#range-selector-demo { height: 440px; width: 100%; text-align: center; }