@model IEnumerable<DevExtreme.NETCore.Demos.Models.NumericScaleProduct>
@(Html.DevExtreme().RangeSelector()
.ID("range-selector")
.DataSource(Model)
.Margin(m => m.Top(50))
.Chart(c => c
.CommonSeriesSettings(cs => cs
.Type(SeriesType.Spline)
.ArgumentField("Weight")
)
.Series(s => {
s.Add().ValueField("AppleCost").Color("#00ff00");
s.Add().ValueField("OrangeCost").Color("#ffa500");
})
)
.Scale(s => s.ValueType(ChartDataType.Numeric))
.Value(new[] { 1.0, 2.0 })
.Title("Select a Product Weight")
)
using DevExtreme.NETCore.Demos.Models.SampleData;
using Microsoft.AspNetCore.Mvc;
using System.Linq;
namespace DevExtreme.NETCore.Demos.Controllers {
public class RangeSelectorController : Controller {
public ActionResult NumericScale() {
return View(SampleData.NumericScaleProducts);
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.NETCore.Demos.Models {
public class NumericScaleProduct {
public double Weight { get; set; }
public double AppleCost { get; set; }
public double OrangeCost { get; set; }
}
}
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.NETCore.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<NumericScaleProduct> NumericScaleProducts = new[] {
new NumericScaleProduct { Weight = 1, AppleCost = 3, OrangeCost = 7 },
new NumericScaleProduct { Weight = 2, AppleCost = 20, OrangeCost = 14 },
new NumericScaleProduct { Weight = 3, AppleCost = 21, OrangeCost = 21 },
new NumericScaleProduct { Weight = 4, AppleCost = 22, OrangeCost = 28 },
new NumericScaleProduct { Weight = 5, AppleCost = 25, OrangeCost = 35 },
new NumericScaleProduct { Weight = 6, AppleCost = 30, OrangeCost = 42 },
new NumericScaleProduct { Weight = 7, AppleCost = 35, OrangeCost = 44 },
new NumericScaleProduct { Weight = 8, AppleCost = 42, OrangeCost = 45 },
new NumericScaleProduct { Weight = 9, AppleCost = 49, OrangeCost = 46 },
new NumericScaleProduct { Weight = 10, AppleCost = 60, OrangeCost = 47 }
};
}
}
#range-selector {
height: 400px;
}