-
Data Grid
- Overview
-
Data Binding
-
Paging and Scrolling
-
Editing
-
Grouping
-
Filtering and Sorting
- Focused Row
-
Row Drag & Drop
-
Selection
-
Columns
- State Persistence
-
Appearance
-
Templates
-
Data Summaries
-
Master-Detail
-
Export to PDF
-
Export to Excel
-
Adaptability
- Keyboard Navigation
-
Pivot Grid
- Overview
-
Data Binding
-
Field Chooser
-
Features
-
Export to Excel
-
Tree List
- Overview
-
Data Binding
- Sorting
- Paging
-
Editing
- Node Drag & Drop
- Focused Row
-
Selection
-
Filtering
-
Column Customization
- State Persistence
- Adaptability
- Keyboard Navigation
-
Scheduler
- Overview
-
Data Binding
-
Views
-
Features
- Virtual Scrolling
-
Grouping
-
Customization
- Adaptability
-
Html Editor
-
Chat
-
Diagram
- Overview
-
Data Binding
-
Featured Shapes
-
Custom Shapes
-
Document Capabilities
-
User Interaction
- UI Customization
- Adaptability
-
Charts
- Overview
-
Data Binding
-
Area Charts
-
Bar Charts
- Bullet Charts
-
Doughnut Charts
-
Financial Charts
-
Line Charts
-
Pie Charts
-
Point Charts
-
Polar and Radar Charts
-
Range Charts
-
Sparkline Charts
-
Tree Map
-
Funnel and Pyramid Charts
- Sankey Chart
-
Combinations
-
More Features
-
Export
-
Selection
-
Tooltips
-
Zooming
-
-
Gantt
- Overview
-
Data
-
UI Customization
- Strip Lines
- Export to PDF
- Sorting
-
Filtering
-
Gauges
- Overview
-
Data Binding
-
Bar Gauge
-
Circular Gauge
-
Linear Gauge
-
Navigation
- Overview
- Accordion
-
Menu
- Multi View
-
Drawer
-
Tab Panel
-
Tabs
-
Toolbar
- Pagination
-
Tree View
- Right-to-Left Support
-
Layout
-
Tile View
- Splitter
-
Gallery
- Scroll View
- Resizable
-
-
Editors
- Overview
- Autocomplete
-
Calendar
- Check Box
- Color Box
- Date Box
-
Date Range Box
-
Drop Down Box
-
Number Box
-
Select Box
- Switch
-
Tag Box
- Text Area
- Text Box
- Validation
- Custom Text Editor Buttons
- Right-to-Left Support
- Editor Appearance Variants
-
Forms and Multi-Purpose
- Overview
- Button Group
- Field Set
-
Filter Builder
-
Form
- Radio Group
-
Range Selector
- Numeric Scale (Lightweight)
- Numeric Scale
- Date-Time Scale (Lightweight)
- Date-Time Scale
- Logarithmic Scale
- Discrete scale
- Custom Formatting
- Use Range Selection for Calculation
- Use Range Selection for Filtering
- Image on Background
- Chart on Background
- Customized Chart on Background
- Chart on Background with Series Template
- Range Slider
- Slider
-
Sortable
-
File Management
-
File Manager
- Overview
-
File System Types
-
Customization
-
File Uploader
-
-
Actions and Lists
-
Maps
- Overview
-
Map
-
Vector Map
-
Dialogs and Notifications
-
Localization
Charts - Timeline Chart
Timeline charts represent events in chronological order.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
<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>
xxxxxxxxxx
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.