Range Selector - Discrete scale

In this demo, a discrete scale is used to select a range within a set of categories.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

<div id="range-selector-demo"> @(Html.DevExtreme().RangeSelector() .ID("range-selector") .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; } var totalText = new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }).format(total); $("#total").text(totalText); } </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; namespace DevExtreme.MVC.Demos.Models.SampleData { public partial class SampleData { public static readonly IEnumerable<object> CopperProductionData = new[] { 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 { text-align: center; } #range-selector { margin-bottom: 20px; height: 200px; }