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.
<div class="demo-container"> @(Html.DevExtreme().RangeSelector() .ID("range-selector") .Margin(m => m .Left(15) .Right(15) .Top(50) ) .Size(s => s.Height(270)) .Scale(s => { s.MinorTickInterval(0.5); s.TickInterval(1); s.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") ); c.TopIndent(0.05); c.BottomIndent(0.05); }) .Value(new double[] { 0, 5 }) .Title("Select a Range in the CPU Usage History") .DataSource(Model) ) </div>
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.MVC.Demos.Models.SampleData; 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; using System.Linq; using System.Web; namespace DevExtreme.MVC.Demos.Models.SampleData { public partial class SampleData { public static List<object> CpuPoints = new List<object> { 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: 440px; width: 100%; }