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

​x
 
@(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))​

xxxxxxxxxx
 
using DevExtreme.NETCore.Demos.Models.SampleData;using Microsoft.AspNetCore.Mvc;using System.Linq;​namespace DevExtreme.NETCore.Demos.Controllers {    public class RangeSelectorController : Controller {        public ActionResult EmbeddedChartSeriesTemplate() {            return View(SampleData.OilProductionData.Where(e => new[] { "USA", "Saudi Arabia", "Mexico" }.Contains(e.Country)));        }    }}

xxxxxxxxxx
 
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; }    }}​

xxxxxxxxxx
 
using System.Collections.Generic;​namespace DevExtreme.NETCore.Demos.Models.SampleData {    public partial class SampleData {        public static readonly IEnumerable<OilProduction> OilProductionData = new[] {            new OilProduction { Year = 1970, Country = "Saudi Arabia", Oil = 186.7 },            new OilProduction { Year = 1970, Country = "USA", Oil = 557.8 },            new OilProduction { Year = 1970, Country = "Iran", Oil = 207.3 },            new OilProduction { Year = 1970, Country = "Mexico", Oil = 24.7 },            new OilProduction { Year = 1980, Country = "Saudi Arabia", Oil = 480.4 },            new OilProduction { Year = 1980, Country = "USA", Oil = 423.2 },            new OilProduction { Year = 1980, Country = "Iran", Oil = 74.3 },            new OilProduction { Year = 1980, Country = "Mexico", Oil = 109.2 },            new OilProduction { Year = 1990, Country = "Saudi Arabia", Oil = 319.6 },            new OilProduction { Year = 1990, Country = "USA", Oil = 340.1 },            new OilProduction { Year = 1990, Country = "Iran", Oil = 183.3 },            new OilProduction { Year = 1990, Country = "Mexico", Oil = 145.3 },            new OilProduction { Year = 1990, Country = "Russia", Oil = 499.6 },            new OilProduction { Year = 2000, Country = "Saudi Arabia", Oil = 465 },            new OilProduction { Year = 2000, Country = "USA", Oil = 282.9 },            new OilProduction { Year = 2000, Country = "Iran", Oil = 195.5 },            new OilProduction { Year = 2000, Country = "Mexico", Oil = 148.3 },            new OilProduction { Year = 2000, Country = "Russia", Oil = 375.3 },            new OilProduction { Year = 2008, Country = "Saudi Arabia", Oil = 549.7 },            new OilProduction { Year = 2008, Country = "USA", Oil = 280 },            new OilProduction { Year = 2008, Country = "Iran", Oil = 214.9 },            new OilProduction { Year = 2008, Country = "Mexico", Oil = 132.1 },            new OilProduction { Year = 2008, Country = "Russia", Oil = 503.2 },            new OilProduction { Year = 2009, Country = "Saudi Arabia", Oil = 428.4 },            new OilProduction { Year = 2009, Country = "USA", Oil = 298.9 },            new OilProduction { Year = 2009, Country = "Iran", Oil = 217.2 },            new OilProduction { Year = 2009, Country = "Mexico", Oil = 121.6 },            new OilProduction { Year = 2009, Country = "Russia", Oil = 493.1 }        };    }}​

xxxxxxxxxx
 
#range-selector {    height: 310px;}​