Range Selector ▸ Embedded Chart (Series Template)

@(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 = 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 }
        };
    }
}

#range-selector {
    height: 310px;
}