Range Selector - Chart on Background

This demo demonstrates the ability of the RangeSelector to show the Chart component with multiple series as a background view.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

@model IEnumerable<DevExtreme.MVC.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.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 ChartOnBackground() { return View(SampleData.CostsAndRevenues); } } }

using System; using System.Collections.Generic; using System.Linq; 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; namespace DevExtreme.MVC.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; }