Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss
Your search did not match any results.
Range Selector

Customized Chart on Background

Documentation

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

@(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 CustomizedChartOnBackground() { 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; }