Your search did not match any results.

Range Selector - Embedded Chart (Series Template)

This demo demonstrates the ability of the RangeSelector to display the Chart component with series defined using a series template.

Backend API
@(Html.DevExtreme().RangeSelector() .ID("range-selector") .Margin(m => m.Top(50)) .Scale(s => s.Label(f => f.Format(Format.Decimal))) .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.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 EmbeddedChartSeriesTemplate() { 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.MVC.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.MVC.Demos.Models.SampleData { public partial class SampleData { public static readonly IEnumerable<OilProduction> OilProductionData = new[] { new OilProduction { Year = 1970, Country = "Saudi Arabia", Oil = 190 }, new OilProduction { Year = 1970, Country = "USA", Oil = 530 }, new OilProduction { Year = 1970, Country = "Mexico", Oil = 25 }, new OilProduction { Year = 1970, Country = "Canada", Oil = 70 }, new OilProduction { Year = 1970, Country = "Brazil", Oil = 10 }, new OilProduction { Year = 1980, Country = "Saudi Arabia", Oil = 480 }, new OilProduction { Year = 1980, Country = "USA", Oil = 420 }, new OilProduction { Year = 1980, Country = "Mexico", Oil = 110}, new OilProduction { Year = 1980, Country = "Canada", Oil = 80 }, new OilProduction { Year = 1980, Country = "Brazil", Oil = 20 }, new OilProduction { Year = 1990, Country = "Saudi Arabia", Oil = 330 }, new OilProduction { Year = 1990, Country = "USA", Oil = 300 }, new OilProduction { Year = 1990, Country = "Mexico", Oil = 140 }, new OilProduction { Year = 1990, Country = "Canada", Oil = 95 }, new OilProduction { Year = 1990, Country = "Brazil", Oil = 35 }, new OilProduction { Year = 2000, Country = "Saudi Arabia", Oil = 470 }, new OilProduction { Year = 2000, Country = "USA", Oil = 290 }, new OilProduction { Year = 2000, Country = "Mexico", Oil = 150 }, new OilProduction { Year = 2000, Country = "Canada", Oil = 125 }, new OilProduction { Year = 2000, Country = "Brazil", Oil = 60 }, new OilProduction { Year = 2010, Country = "Saudi Arabia", Oil = 510 }, new OilProduction { Year = 2010, Country = "USA", Oil = 350 }, new OilProduction { Year = 2010, Country = "Mexico", Oil = 140 }, new OilProduction { Year = 2010, Country = "Canada", Oil = 160 }, new OilProduction { Year = 2010, Country = "Brazil", Oil = 110 }, new OilProduction { Year = 2020, Country = "Saudi Arabia", Oil = 520 }, new OilProduction { Year = 2020, Country = "USA", Oil = 560 }, new OilProduction { Year = 2020, Country = "Mexico", Oil = 95 }, new OilProduction { Year = 2020, Country = "Canada", Oil = 240 }, new OilProduction { Year = 2020, Country = "Brazil", Oil = 160 } }; } }
#range-selector { height: 310px; }