$(function() {
$("#chart").dxChart({
dataSource: dataSource,
rotated: true,
barGroupPadding: 0.2,
argumentAxis: {
categories: ["Royal Houses"],
tick: {
visible: false
}
},
title: {
text: "The British Monarchy",
subtitle: "An Abbreviated Timeline"
},
commonSeriesSettings: {
argumentField: "monarch",
type: "rangeBar",
rangeValue1Field: "start",
rangeValue2Field: "end",
ignoreEmptyPoints: true,
barOverlapGroup: "monarchs"
},
seriesTemplate: {
nameField: "house"
},
animation: {
enabled: false
},
legend: {
title: "Royal Houses",
verticalAlignment: "bottom",
horizontalAlignment: "center"
}
});
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/20.2.4/js/dx.all.js"></script>
<script src="data.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="chart"></div>
</div>
</body>
</html>
#chart {
height: 440px;
}
var dataSource = [
{
monarch: "Anne",
start: new Date(1701, 4, 1),
end: new Date(1714, 7, 1),
house: "Stuart"
},
{
monarch: "George I",
start: new Date(1714, 7, 1),
house: "Hanover",
end: new Date(1727, 5, 11)
},
{
monarch: "George II",
start: new Date(1727, 5, 11),
house: "Hanover",
end: new Date(1760, 9, 25)
},
{
monarch: "George III",
start: new Date(1760, 9, 25),
house: "Hanover",
end: new Date(1820, 0, 29)
},
{
monarch: "George IV",
start: new Date(1820, 0, 29),
house: "Hanover",
end: new Date(1830, 5, 26)
},
{
monarch: "William IV",
start: new Date(1830, 5, 26),
house: "Hanover",
end: new Date(1837, 5, 20)
},
{
monarch: "Victoria",
start: new Date(1837, 5, 20),
end: new Date(1901, 0, 22),
house: "Hanover"
},
{
monarch: "Edward VII",
start: new Date(1901, 0, 22),
house: "Saxe-Coburg and Gotha",
end: new Date(1910, 4, 6)
},
{
monarch: "George V",
start: new Date(1910, 4, 6),
house: "Saxe-Coburg and Gotha",
end: new Date(1917, 5, 17)
},
{
monarch: "George V",
start: new Date(1917, 5, 17),
house: "Windsor",
end: new Date(1936, 0, 20)
},
{
monarch: "Edward VIII",
start: new Date(1936, 0, 20),
house: "Windsor",
end: new Date(1936, 11, 11)
},
{
monarch: "George VI",
start: new Date(1936, 11, 11),
house: "Windsor",
end: new Date(1952, 1, 6)
},
{
monarch: "Elizabeth II",
house: "Windsor",
start: new Date(1952, 1, 6),
end: new Date()
},
{
house: "Stuart",
start: new Date(1701, 4, 1),
end: new Date(1714, 7, 1),
monarch: "Royal Houses"
},
{
end: new Date(1901, 0, 22),
house: "Hanover",
start: new Date(1714, 7, 1),
monarch: "Royal Houses"
},
{
start: new Date(1901, 0, 22),
end: new Date(1917, 5, 17),
house: "Saxe-Coburg and Gotha",
monarch: "Royal Houses"
},
{
house: "Windsor",
start: new Date(1917, 5, 17),
end: new Date(),
monarch: "Royal Houses"
}
];
