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.
@(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)) .SeriesTemplate(x => x .NameField("Country") .CustomizeSeries(@<text> function(valueFromNameField) { return valueFromNameField === "USA" ? { color: "red" } : {}; } </text>) ) ) .Title("Select a Year Period") .DataSource(Model) )
using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public class RangeSelectorController : Controller { public ActionResult ChartOnBackgroundWithSeriesTemplate() { return View(SampleData.OilProductionData.Where(e => new[] { "USA", "Saudi Arabia", "Mexico" }.Contains(e.Country))); } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Models { public class OilProduction { public int Year { get; set; } public string Country { get; set; } public double Oil { get; set; } } }
using System.Collections.Generic; namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static List<OilProduction> OilProductionData = new List<OilProduction> { new OilProduction() { Year = 1970, Country = "Saudi Arabia", Oil = 192.2 }, new OilProduction() { Year = 1970, Country = "USA", Oil = 533.5 }, new OilProduction() { Year = 1970, Country = "Iran", Oil = 192.6 }, new OilProduction() { Year = 1970, Country = "Mexico", Oil = 24.2 }, new OilProduction() { Year = 1980, Country = "Saudi Arabia", Oil = 509.8 }, new OilProduction() { Year = 1980, Country = "USA", Oil = 480.2 }, new OilProduction() { Year = 1980, Country = "Iran", Oil = 74.3 }, new OilProduction() { Year = 1980, Country = "Mexico", Oil = 107.2 }, new OilProduction() { Year = 1990, Country = "Saudi Arabia", Oil = 342.6 }, new OilProduction() { Year = 1990, Country = "USA", Oil = 416.6 }, new OilProduction() { Year = 1990, Country = "Iran", Oil = 162.8 }, new OilProduction() { Year = 1990, Country = "Mexico", Oil = 146.3 }, new OilProduction() { Year = 1990, Country = "Russia", Oil = 515.9 }, new OilProduction() { Year = 2000, Country = "Saudi Arabia", Oil = 456.3 }, new OilProduction() { Year = 2000, Country = "USA", Oil = 352.6 }, new OilProduction() { Year = 2000, Country = "Iran", Oil = 191.3 }, new OilProduction() { Year = 2000, Country = "Mexico", Oil = 171.2 }, new OilProduction() { Year = 2000, Country = "Russia", Oil = 323.3 }, new OilProduction() { Year = 2008, Country = "Saudi Arabia", Oil = 515.3 }, new OilProduction() { Year = 2008, Country = "USA", Oil = 304.9 }, new OilProduction() { Year = 2008, Country = "Iran", Oil = 209.9 }, new OilProduction() { Year = 2008, Country = "Mexico", Oil = 157.7 }, new OilProduction() { Year = 2008, Country = "Russia", Oil = 488.5 }, new OilProduction() { Year = 2009, Country = "Saudi Arabia", Oil = 459.5 }, new OilProduction() { Year = 2009, Country = "USA", Oil = 325.3 }, new OilProduction() { Year = 2009, Country = "Iran", Oil = 202.4 }, new OilProduction() { Year = 2009, Country = "Mexico", Oil = 147.5 }, new OilProduction() { Year = 2009, Country = "Russia", Oil = 494.2 } }; } }
#range-selector { height: 440px; width: 100%; }