Range Selector ▸ Discrete scale

<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;
}