Your search did not match any results.
Range Selector

Chart on Background with Series Template

Documentation
This demo demonstrates the ability of the RangeSelector to display the Chart widget with series defined using a series template.
<div class="demo-container"> @(Html.DevExtreme().RangeSelector() .ID("range-selector") .Margin(m => m.Top(50)) .Size(s => s.Height(310)) .Chart(c => { c.CommonSeriesSettings(x => x .ArgumentField("Year") .ValueField("Oil") .Type(SeriesType.Spline)); c.SeriesTemplate(x => x .NameField("Country") .CustomizeSeries(@<text> function (valueFromNameField) { if(["USA", "Saudi Arabia", "Mexico"].indexOf(valueFromNameField) == -1) return { visible: false }; return valueFromNameField === "USA" ? { color: "red" } : {}; } </text>) ); }) .Title("Select a Year Period") .DataSource(Model) ) </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 ChartOnBackgroundWithSeriesTemplate() { return View(SampleData.OilProductionData); } } }
using System.Collections.Generic; namespace DevExtreme.MVC.Demos.Models.SampleData { public partial class SampleData { public static List<object> OilProductionData = new List<object> { new { Year = 1970, Country = "Saudi Arabia", Oil = 192.2 }, new { Year = 1970, Country = "USA", Oil = 533.5 }, new { Year = 1970, Country = "Iran", Oil = 192.6 }, new { Year = 1970, Country = "Mexico", Oil = 24.2 }, new { Year = 1980, Country = "Saudi Arabia", Oil = 509.8 }, new { Year = 1980, Country = "USA", Oil = 480.2 }, new { Year = 1980, Country = "Iran", Oil = 74.3 }, new { Year = 1980, Country = "Mexico", Oil = 107.2 }, new { Year = 1990, Country = "Saudi Arabia", Oil = 342.6 }, new { Year = 1990, Country = "USA", Oil = 416.6 }, new { Year = 1990, Country = "Iran", Oil = 162.8 }, new { Year = 1990, Country = "Mexico", Oil = 146.3 }, new { Year = 1990, Country = "Russia", Oil = 515.9 }, new { Year = 2000, Country = "Saudi Arabia", Oil = 456.3 }, new { Year = 2000, Country = "USA", Oil = 352.6 }, new { Year = 2000, Country = "Iran", Oil = 191.3 }, new { Year = 2000, Country = "Mexico", Oil = 171.2 }, new { Year = 2000, Country = "Russia", Oil = 323.3 }, new { Year = 2008, Country = "Saudi Arabia", Oil = 515.3 }, new { Year = 2008, Country = "USA", Oil = 304.9 }, new { Year = 2008, Country = "Iran", Oil = 209.9 }, new { Year = 2008, Country = "Mexico", Oil = 157.7 }, new { Year = 2008, Country = "Russia", Oil = 488.5 }, new { Year = 2009, Country = "Saudi Arabia", Oil = 459.5 }, new { Year = 2009, Country = "USA", Oil = 325.3 }, new { Year = 2009, Country = "Iran", Oil = 202.4 }, new { Year = 2009, Country = "Mexico", Oil = 147.5 }, new { Year = 2009, Country = "Russia", Oil = 494.2 } }; } }
#range-selector { height: 440px; width: 100%; }