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