@(Html.DevExtreme().RangeSelector()
.ID("range-selector")
.Margin(m => m
.Left(15)
.Right(15)
.Top(50)
)
.Scale(s => s
.MinorTickInterval(0.5)
.TickInterval(1)
.Label(l => l.CustomizeText(@<text>
function() {
return this.valueText + " s";
}
</text>))
)
.SliderMarker(s => s.Visible(false))
.Background(b => b.Color("#808080"))
.Chart(c => c
.Series(s => s
.Add().Color("#ffa500").Width(3).Type(SeriesType.Line).ArgumentField("X").ValueField("Y")
)
.TopIndent(0.05)
.BottomIndent(0.05)
)
.Value(new[] { 0, 5.0 })
.Title("Select a Range in the CPU Usage History")
.DataSource(Model)
)
using DevExtreme.NETCore.Demos.Models.SampleData;
using Microsoft.AspNetCore.Mvc;
using System.Linq;
namespace DevExtreme.NETCore.Demos.Controllers {
public class RangeSelectorController : Controller {
public ActionResult CustomizedChartOnBackground() {
return View(SampleData.CpuPoints);
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.NETCore.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<object> CpuPoints = new[] {
new { X = 0, Y = 15 },
new { X = 1, Y = -1 },
new { X = 2, Y = 10 },
new { X = 3, Y = -3 },
new { X = 4, Y = 16 },
new { X = 5, Y = 0 },
new { X = 6, Y = 9 },
new { X = 7, Y = 3 },
new { X = 8, Y = 15 },
new { X = 9, Y = -1 },
new { X = 10, Y = 10 },
new { X = 11, Y = -3 },
new { X = 12, Y = 16 },
new { X = 13, Y = 0 },
new { X = 14, Y = 9 },
new { X = 15, Y = 3 },
new { X = 16, Y = 13 }
};
}
}
#range-selector {
height: 270px;
}