Your search did not match any results.
Charts

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.
@(Html.DevExtreme().Chart() .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)) .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.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 List<object> AustralianOlympicMedals = new List<object> { 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 } }; } }