@model IEnumerable<DevExtreme.NETCore.Demos.Models.DateTimeScaleTemperature>
@(Html.DevExtreme().RangeSelector()
.ID("range-selector")
.DataSource(Model)
.Margin(m => m.Top(50))
.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(i => i.Days(2))
.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.NETCore.Demos.Models.SampleData;
using Microsoft.AspNetCore.Mvc;
using System.Linq;
namespace DevExtreme.NETCore.Demos.Controllers {
public class RangeSelectorController : Controller {
public ActionResult DateTimeScale() {
return View(SampleData.DateTimeScaleTemperatures);
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.NETCore.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.NETCore.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<DateTimeScaleTemperature> DateTimeScaleTemperatures = new[] {
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: 400px;
}