Your search did not match any results.
Range Selector

Chart on Background

Documentation
This demo demonstrates the ability of the RangeSelector to show the Chart widget with multiple series as a background view.
@model IList<DevExtreme.MVC.Demos.Models.CostAndRevenue> <div class="demo-container"> @(Html.DevExtreme().RangeSelector() .ID("range-selector") .Margin(m => m.Top(50)) .Scale(s => { s.MinorTickInterval(t => t.Days(1)); s.TickInterval(t => t.Days(7)); }) .Size(s => s.Height(310)) .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 DateTime[] { new DateTime(2011, 12, 25), new DateTime(2012, 1, 1) }) .Title("Select a Range in the Costs and Revenues History") ) </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 ChartOnBackground() { return View(SampleData.CostsAndRevenues); } } }
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace DevExtreme.MVC.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; using System.Web; namespace DevExtreme.MVC.Demos.Models.SampleData { public partial class SampleData { public static List<CostAndRevenue> CostsAndRevenues = new List<CostAndRevenue>() { new CostAndRevenue() { Date = new DateTime(2011, 12, 22), Cost = 19, Revenue = 18 }, new CostAndRevenue() { Date = new DateTime(2011, 12, 22), 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: 440px; width: 100%; }