@model IEnumerable<DevExtreme.NETCore.Demos.Models.CostAndRevenue>
@(Html.DevExtreme().RangeSelector()
.ID("range-selector")
.Margin(m => m.Top(50))
.Scale(s => s
.MinorTickInterval(t => t.Days(1))
.TickInterval(t => t.Days(7))
)
.DataSource(Model)
.Chart(c => c
.Series(s => {
s.Add().ArgumentField("Date").ValueField("Cost");
s.Add().ArgumentField("Date").ValueField("Revenue");
})
.ValueAxis(v => v.Min(0))
)
.Value(new[] { new DateTime(2011, 12, 25), new DateTime(2012, 1, 1) })
.Title("Select a Range in the Costs and Revenues History")
)
using DevExtreme.NETCore.Demos.Models.SampleData;
using Microsoft.AspNetCore.Mvc;
using System.Linq;
namespace DevExtreme.NETCore.Demos.Controllers {
public class RangeSelectorController : Controller {
public ActionResult ChartOnBackground() {
return View(SampleData.CostsAndRevenues);
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.NETCore.Demos.Models {
public class CostAndRevenue {
public DateTime Date { get; set; }
public double Cost { get; set; }
public double Revenue { 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<CostAndRevenue> CostsAndRevenues = new[] {
new CostAndRevenue { Date = new DateTime(2011, 12, 22), Cost = 19, Revenue = 18 },
new CostAndRevenue { Date = new DateTime(2011, 12, 29), Cost = 27, Revenue = 12 },
new CostAndRevenue { Date = new DateTime(2012, 1, 5), Cost = 30, Revenue = 5 },
new CostAndRevenue { Date = new DateTime(2012, 1, 12), Cost = 26, Revenue = 6 },
new CostAndRevenue { Date = new DateTime(2012, 1, 19), Cost = 18, Revenue = 10 },
new CostAndRevenue { Date = new DateTime(2012, 1, 26), Cost = 15, Revenue = 15 },
new CostAndRevenue { Date = new DateTime(2012, 2, 2), Cost = 14, Revenue = 21 },
new CostAndRevenue { Date = new DateTime(2012, 2, 9), Cost = 14, Revenue = 25 }
};
}
}
#range-selector {
height: 310px;
}