Your search did not match any results.

Step Line

Documentation

Step line series are much like traditional line series. The primary difference is that in step line series, data points are connected by vertical and horizontal lines --- resulting in a «stair step» effect.

www.wikipedia.org
Backend API
@(Html.DevExtreme().Chart() .ID("container") .Title("Australian Olympic Medal Count") .CommonSeriesSettings(s => s .Type(SeriesType.StepLine) .ArgumentField("Year") .Stepline(sl => sl .Point(p => p.Visible(false)) ) ) .Series(s => { s.Add().ValueField("Bronze").Name("Bronze Medals").Color("#cd7f32"); s.Add().ValueField("Silver").Name("Silver Medals").Color("#c0c0c0"); s.Add().ValueField("Gold").Name("Gold Medals").Color("#ffd700"); }) .Export(e => e.Enabled(true)) .ArgumentAxis(a => a .Label(l => l .Format(f => f .Type(Format.Decimal) ) ) ) .Legend(l => l .VerticalAlignment(VerticalEdge.Bottom) .HorizontalAlignment(HorizontalAlignment.Center) ) .DataSource(Model) )
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.MVC.Demos.Models.SampleData; using Newtonsoft.Json; using System; using System.Collections.Generic; using System.Linq; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class ChartsController : Controller { public ActionResult StepLine() { return View(SampleData.AustralianOlympicMedals); } } }
using System.Collections.Generic; namespace DevExtreme.MVC.Demos.Models.SampleData { public partial class SampleData { public static readonly IEnumerable<object> AustralianOlympicMedals = new[] { new { Year = 1896, Gold = 2, Silver = 0, Bronze = 0 }, new { Year = 1900, Gold = 2, Silver = 0, Bronze = 3 }, new { Year = 1904, Gold = 0, Silver = 0, Bronze = 0 }, new { Year = 1908, Gold = 1, Silver = 2, Bronze = 2 }, new { Year = 1912, Gold = 2, Silver = 2, Bronze = 3 }, new { Year = 1916, Gold = 0, Silver = 0, Bronze = 0 }, new { Year = 1920, Gold = 0, Silver = 2, Bronze = 1 }, new { Year = 1924, Gold = 3, Silver = 1, Bronze = 2 }, new { Year = 1928, Gold = 1, Silver = 2, Bronze = 1 }, new { Year = 1932, Gold = 3, Silver = 1, Bronze = 1 }, new { Year = 1936, Gold = 0, Silver = 0, Bronze = 1 }, new { Year = 1940, Gold = 0, Silver = 0, Bronze = 0 }, new { Year = 1944, Gold = 0, Silver = 0, Bronze = 0 }, new { Year = 1948, Gold = 2, Silver = 6, Bronze = 5 }, new { Year = 1952, Gold = 6, Silver = 2, Bronze = 3 }, new { Year = 1956, Gold = 13, Silver = 8, Bronze = 14 }, new { Year = 1960, Gold = 8, Silver = 8, Bronze = 6 }, new { Year = 1964, Gold = 6, Silver = 2, Bronze = 10 }, new { Year = 1968, Gold = 5, Silver = 7, Bronze = 5 }, new { Year = 1972, Gold = 8, Silver = 7, Bronze = 2 }, new { Year = 1976, Gold = 0, Silver = 1, Bronze = 4 }, new { Year = 1980, Gold = 2, Silver = 2, Bronze = 5 }, new { Year = 1984, Gold = 4, Silver = 8, Bronze = 12 }, new { Year = 1988, Gold = 3, Silver = 6, Bronze = 5 }, new { Year = 1992, Gold = 7, Silver = 9, Bronze = 11 }, new { Year = 1996, Gold = 9, Silver = 9, Bronze = 23 }, new { Year = 2000, Gold = 16, Silver = 25, Bronze = 17 }, new { Year = 2004, Gold = 17, Silver = 16, Bronze = 16 }, new { Year = 2008, Gold = 14, Silver = 15, Bronze = 17 }, new { Year = 2012, Gold = 8, Silver = 15, Bronze = 12 }, new { Year = 2016, Gold = 8, Silver = 11, Bronze = 10 } }; } }
#container { height: 440px; }