Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss
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 UI component with multiple series as a background view.

@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; }