Your search did not match any results.
RangeSelector

Date-Time Scale

Documentation

In this demo, data used to define the RangeSelector scale comes in the string type. However, there is the valueType option that specifies the actual scale data type. As this option is set to «datetime», the string data will be cast to the date type.

@model List<DevExtreme.MVC.Demos.Models.DateTimeScaleTemperature> @(Html.DevExtreme().RangeSelector() .ID("range-selector") .DataSource(Model) .Margin(m => m.Top(50)) .Size(s => s.Height(400)) .Chart(c => c .CommonSeriesSettings(cs => cs .Type(SeriesType.StepArea) .ArgumentField("Date") ) .Series(s => { s.Add().ValueField("DayT").Color("yellow"); s.Add().ValueField("NigthT"); }) ) .Scale(s => s .MinorTickInterval(VizTimeInterval.Day) .TickInterval(VizTimeInterval.Day) .ValueType(ChartDataType.DateTime) ) .SliderMarker(sm => sm.Format(Format.Day)) .Value(new[] { new DateTime(2013, 3, 1), new DateTime(2013, 3, 7) }) .Title("Select a Month Period") )
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 DateTimeScale() { return View(SampleData.DateTimeScaleTemperatures); } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.MVC.Demos.Models { public class DateTimeScaleTemperature { public DateTime Date { get; set; } public double DayT { get; set; } public double NigthT { get; set; } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.MVC.Demos.Models.SampleData { public partial class SampleData { public static List<DateTimeScaleTemperature> DateTimeScaleTemperatures = new List<DateTimeScaleTemperature> { new DateTimeScaleTemperature() { Date = new DateTime(2013, 3, 1), DayT = 7, NigthT = 2 }, new DateTimeScaleTemperature() { Date = new DateTime(2013, 3, 2), DayT = 4, NigthT = -1 }, new DateTimeScaleTemperature() { Date = new DateTime(2013, 3, 3), DayT = 4, NigthT = -2 }, new DateTimeScaleTemperature() { Date = new DateTime(2013, 3, 4), DayT = 6, NigthT = -3 }, new DateTimeScaleTemperature() { Date = new DateTime(2013, 3, 5), DayT = 9, NigthT = -1 }, new DateTimeScaleTemperature() { Date = new DateTime(2013, 3, 6), DayT = 6, NigthT = 3 }, new DateTimeScaleTemperature() { Date = new DateTime(2013, 3, 7), DayT = 3, NigthT = 1 }, new DateTimeScaleTemperature() { Date = new DateTime(2013, 3, 8), DayT = 6, NigthT = -1 }, new DateTimeScaleTemperature() { Date = new DateTime(2013, 3, 9), DayT = 13, NigthT = 2 }, new DateTimeScaleTemperature() { Date = new DateTime(2013, 3, 10), DayT = 10, NigthT = 2 }, new DateTimeScaleTemperature() { Date = new DateTime(2013, 3, 11), DayT = 12, NigthT = 4 }, new DateTimeScaleTemperature() { Date = new DateTime(2013, 3, 12), DayT = 14, NigthT = 6 }, new DateTimeScaleTemperature() { Date = new DateTime(2013, 3, 13), DayT = 11, NigthT = 3 }, new DateTimeScaleTemperature() { Date = new DateTime(2013, 3, 14), DayT = 5, NigthT = -2 }, new DateTimeScaleTemperature() { Date = new DateTime(2013, 3, 15), DayT = 8, NigthT = -1 }, new DateTimeScaleTemperature() { Date = new DateTime(2013, 3, 16), DayT = 5, NigthT = 0 }, new DateTimeScaleTemperature() { Date = new DateTime(2013, 3, 17), DayT = 3, NigthT = -2 }, new DateTimeScaleTemperature() { Date = new DateTime(2013, 3, 18), DayT = 2, NigthT = -2 }, new DateTimeScaleTemperature() { Date = new DateTime(2013, 3, 19), DayT = 6, NigthT = 1 }, new DateTimeScaleTemperature() { Date = new DateTime(2013, 3, 20), DayT = 7, NigthT = 0 }, new DateTimeScaleTemperature() { Date = new DateTime(2013, 3, 21), DayT = 4, NigthT = -1 }, new DateTimeScaleTemperature() { Date = new DateTime(2013, 3, 22), DayT = 5, NigthT = -2 }, new DateTimeScaleTemperature() { Date = new DateTime(2013, 3, 23), DayT = 8, NigthT = 0 }, new DateTimeScaleTemperature() { Date = new DateTime(2013, 3, 24), DayT = 8, NigthT = 1 }, new DateTimeScaleTemperature() { Date = new DateTime(2013, 3, 25), DayT = 4, NigthT = 2 }, new DateTimeScaleTemperature() { Date = new DateTime(2013, 3, 26), DayT = 12, NigthT = 3 }, new DateTimeScaleTemperature() { Date = new DateTime(2013, 3, 27), DayT = 12, NigthT = 2 }, new DateTimeScaleTemperature() { Date = new DateTime(2013, 3, 28), DayT = 11, NigthT = 3 }, new DateTimeScaleTemperature() { Date = new DateTime(2013, 3, 29), DayT = 13, NigthT = 4 }, new DateTimeScaleTemperature() { Date = new DateTime(2013, 3, 30), DayT = 15, NigthT = 4 }, new DateTimeScaleTemperature() { Date = new DateTime(2013, 3, 31), DayT = 12, NigthT = 7 }, }; } }
#range-selector { height: 440px; width: 100%; }