diff --git a/structs.go b/structs.go
index 5be2da3..21f823f 100644
--- a/structs.go
+++ b/structs.go
@@ -274,3 +274,54 @@ func (dm *dashboardMetric) IsValid() (bool, string) {
 
 	return true, ""
 }
+
+type historyBarSegment struct {
+	Duration   time.Duration
+	End        time.Time
+	Percentage float64
+	Start      time.Time
+	Status     string
+}
+
+func (dm dashboardMetric) GetHistoryBar() []historyBarSegment {
+	var (
+		point     dashboardMetricStatus
+		segLength int
+		segments  = []historyBarSegment{}
+		segStart  time.Time
+		status    = "Unknown"
+	)
+
+	for _, point = range dm.HistoricalData {
+		if point.Status == status {
+			segLength++
+			continue
+		}
+
+		// Store the old segment
+		if segLength > 0 {
+			segments = append(segments, historyBarSegment{
+				Duration:   point.Time.Sub(segStart),
+				End:        point.Time,
+				Percentage: float64(segLength) / float64(len(dm.HistoricalData)),
+				Start:      segStart,
+				Status:     status,
+			})
+		}
+
+		// Start a new segment
+		segLength = 1
+		segStart = point.Time
+		status = point.Status
+	}
+
+	segments = append(segments, historyBarSegment{
+		Duration:   point.Time.Sub(segStart),
+		End:        point.Time,
+		Percentage: float64(segLength) / float64(len(dm.HistoricalData)),
+		Start:      segStart,
+		Status:     status,
+	})
+
+	return segments
+}
diff --git a/templates/dashboard.html b/templates/dashboard.html
index 1ce5563..8b97a5d 100644
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -140,12 +140,19 @@
           </div>
           <div class="col-md-3 hidden-xs">
             <div class="progress">
-              <div class="progress-bar progress-bar-success" style="width: {{ metric.Meta.PercOK }}%">
-              </div>
-              <div class="progress-bar progress-bar-warning" style="width: {{ metric.Meta.PercWarn }}%">
-              </div>
-              <div class="progress-bar progress-bar-danger" style="width: {{ metric.Meta.PercCrit }}%">
+              {% for seg in metric.GetHistoryBar %}
+              <div class="progress-bar
+                          {% if seg.Status == "OK" %}progress-bar-success
+                          {% elif seg.Status == "Warning" %}progress-bar-warning
+                          {% elif seg.Status == "Critical" %}progress-bar-danger
+                          {% else %}progress-bar-info
+                          {% endif %}"
+                   style="width: {{ seg.Percentage * 100 }}%"
+                   data-toggle="tooltip" data-placement="bottom"
+                   title="Start: {{ seg.Start|time:"2006-01-02 15:04:05" }}<br>End: {{ seg.End|time:"2006-01-02 15:04:05" }}"
+              >
               </div>
+              {% endfor %}
             </div>
           </div>
         </div>
@@ -160,5 +167,13 @@
     <!-- Include all compiled plugins (below), or include individual files as needed -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"
             integrity="sha256-U5ZEeKfGNOja007MMD3YBI0A3OSZOQbeG6z2f2Y0hu8=" crossorigin="anonymous"></script>
+    <script>
+      $(function () {
+        $('[data-toggle="tooltip"]').tooltip({
+          container: 'body',
+          html: true,
+        });
+      });
+    </script>
   </body>
 </html>