I have a web page where I want to show where we are today, in a graph/chart with two time periods, Period 1 and Period 2.
Ideally I want to show something like this on my page:
All texts and markers should ideally be shown as-is, as it will be quite clear where we are in this process today.
I have looked into a CSS/HTML approach (view JSFiddle), but struggle to get the details in shape. I have also looked into the ECharts graph library but also gave up on this, so I would really appreciate some hints here 🙂
Maybe there is already a specific library for this, that I can just utilize or maybe my CSS/HTML can be tweaked into actually working?
JSFiddle, https://jsfiddle.net/5jg9azyc/
HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css" type="text/css" />
</head>
<body>
<!-- All credit goes to ChatGPT -->
<div class="timeline-container">
<div class="timeline">
<div class="milestone start"></div>
<div class="phase development">
<span>Period 1</span>
</div>
<div class="milestone today"></div>
<div class="phase system-test">
<span>Period 2</span>
</div>
<div class="milestone end"></div>
</div>
<div class="date-labels">
<span>2024-Jan-1</span>
<span>Today</span>
<span>2024-Apr-28</span>
</div>
</div>
</body>
</html>
CSS code:
.timeline-container {
position: relative;
padding-top: 30px; /* Space for date labels */
}
.timeline {
display: flex;
align-items: center;
height: 20px;
}
.milestone {
width: 2px;
background-color: red;
position: absolute;
height: 50px; /* Adjust to exceed the timeline height */
}
.milestone.start {
left: 0;
top: 50%;
transform: translateY(-100%);
}
.milestone.today {
left: 50%; /* Adjust based on actual timeline progression */
top: 50%;
transform: translateY(-100%);
}
.milestone.end {
right: 0;
top: 50%;
transform: translateY(-100%);
}
.phase {
flex-grow: 1;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
color: white;
font-size: 16px;
}
.phase > span {
z-index: 1;
position: relative;
}
.development {
background-color: #4F81BD;
}
.system-test {
background-color: #9BBB59;
margin-left: -2px; /* To remove gap */
}
.date-labels {
display: flex;
justify-content: space-between;
position: absolute;
width: 100%;
top: 0;
}
.date-labels > span {
position: absolute;
top: -20px; /* Adjust as needed */
color: black;
font-size: 12px;
}
.date-labels > span:first-child {
left: 0;
}
.date-labels > span:nth-child(2) {
left: 50%; /* Adjust to match the 'Today' marker */
transform: translateX(-50%);
}
.date-labels > span:last-child {
right: 0;
}