Range Selector - Embedded Chart (Customized)

This demo illustrates the ability of the RangeSelector to show the Chart with customized settings.

Backend API

​x
 
@(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))​

xxxxxxxxxx
 
using DevExtreme.NETCore.Demos.Models.SampleData;using Microsoft.AspNetCore.Mvc;using System.Linq;​namespace DevExtreme.NETCore.Demos.Controllers {    public class RangeSelectorController : Controller {        public ActionResult EmbeddedChartCustomized() {            return View(SampleData.CpuPoints);        }    }}

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

xxxxxxxxxx
 
#range-selector {    height: 270px;}​