Range Selector ▸ Embedded Chart (Customized)

@(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.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 EmbeddedChartCustomized() {
            return View(SampleData.CpuPoints);
        }

    }
}

using System;
using System.Collections.Generic;

namespace DevExtreme.MVC.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;
}