Range Selector ▸ Embedded Chart

@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 EmbeddedChart() {
            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;
}