Your search did not match any results.

Charts - Timeline Chart

Timeline charts represent events in chronological order.

https://en.wikipedia.org
Backend API
<div id="chart-demo"> @(Html.DevExtreme().Chart() .ID("chart") .CommonSeriesSettings(s => s .ArgumentField("Monarch") .Type(SeriesType.RangeBar) .RangeValue1Field("Start") .RangeValue2Field("End") .BarOverlapGroup("monarchs") .MinBarSize(4) ) .BarGroupPadding(0.2) .Rotated(true) .Title(t=>t.Text("The British Monarchy") .Subtitle("An Abbreviated Timeline") ) .ArgumentAxis(a => a .Tick(t => t.Visible(false)) .Categories(new[] { "Royal Houses" }) ) .Size(s=>s.Height(440)) .Legend(l => l .Title("Royal Houses") .VerticalAlignment(VerticalEdge.Bottom) .HorizontalAlignment(HorizontalAlignment.Center) ) .Animation(a => a.Enabled(false)) .SeriesTemplate(s => s.NameField("House")) .DataSource(new[] { new { Monarch="Anne", Start=new DateTime(1701, 5, 1), House="Stuart", End=new DateTime(1714, 8, 1) }, new { Monarch="George I", Start=new DateTime(1714, 8, 1), House="Hanover", End=new DateTime(1727, 6, 11) }, new { Monarch="George II", Start=new DateTime(1727, 6, 11), House="Hanover", End=new DateTime(1760, 10, 25) }, new { Monarch="George III", Start=new DateTime(1760, 10, 25), House="Hanover", End=new DateTime(1820, 1, 29) }, new { Monarch="George IV", Start=new DateTime(1820, 1, 29), House="Hanover", End=new DateTime(1830, 6, 26) }, new { Monarch="William IV", Start=new DateTime(1830, 6, 26), House="Hanover", End=new DateTime(1837, 6, 20) }, new { Monarch="Victoria", Start=new DateTime(1837, 6, 20), House="Hanover", End=new DateTime(1901, 1, 22) }, new { Monarch="Edward VII", Start=new DateTime(1901, 1, 22), House="Saxe-Coburg and Gotha", End=new DateTime(1910, 5, 6) }, new { Monarch="George V", Start=new DateTime(1910, 5, 6), House="Saxe-Coburg and Gotha", End=new DateTime(1917, 6, 17) }, new { Monarch="George V", Start=new DateTime(1917, 6, 17), House="Windsor", End=new DateTime(1936, 1, 20) }, new { Monarch="Edward VIII", Start=new DateTime(1936, 1, 20), House="Windsor", End=new DateTime(1936, 12, 11) }, new { Monarch="George VI", Start=new DateTime(1936, 12, 11), House="Windsor", End=new DateTime(1952, 2, 6) }, new { Monarch="Elizabeth II", Start=new DateTime(1952, 2, 6), House="Windsor", End=new DateTime(2022, 9, 8) }, new { Monarch="Charles III", Start=new DateTime(2022, 9, 8), House="Windsor", End=DateTime.Now }, new { Monarch="Royal Houses", Start=new DateTime(1701, 5, 1), House="Stuart", End=new DateTime(1714, 8, 1) }, new { Monarch="Royal Houses", Start=new DateTime(1714, 8, 1), House="Hanover", End=new DateTime(1901, 1, 22) }, new { Monarch="Royal Houses", Start=new DateTime(1901, 1, 22), House="Saxe-Coburg and Gotha", End=new DateTime(1917, 6, 17) }, new { Monarch="Royal Houses", Start=new DateTime(1917, 6, 17), House="Windsor", End=DateTime.Now } }) ) </div>
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.MVC.Demos.Models.SampleData; using System; using System.Collections.Generic; using System.Linq; using System.Text.Json; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class ChartsController : Controller { public ActionResult Timeline() { return View(); } } }

The exact timeline chart implementation steps depend on the data source. Below are general recommendations on how to create a timeline chart.  

  • Choose a series type
    Each event is represented by its name and start/end dates. In this case, the series type should have points with one argument and two values, for example, the Range Bar.

  • Bind the series to data
    You can bind the series to data directly or use a series template (depending on the data source). These approaches and their differences are described in the Bind Series to Data article. In this demo, we use a series template.

  • Line up bars
    Specify the barOverlapGroup to arrange bars in a line that displays a combined timeline.

  • Rotate the chart
    A range bar chart's bars are vertical. To make them horizontal, set the rotated property to true.

  • Sort the events chronologically
    Arguments maintain objects' order in the data source. If this order is not chronological, use the axis' categories array to specify the order.