diff --git a/o_manager.py b/o_manager.py
index 1eb480d..b17ffab 100644
--- a/o_manager.py
+++ b/o_manager.py
@@ -106,7 +106,7 @@ class OManager:
         # align time range to grid defined by monitoring interval
         now = datetime.now()
         for i in self.instances:
-            lines = math.ceil(time_range*60/5)
+            lines = math.ceil(time_range*60/5)+1
             io_stat = i["op"].get_io_stat(lines=lines)
             first_line = True
             prev_value = None
diff --git a/tabler/index.html b/tabler/index.html
index 236a44e..841c6cf 100644
--- a/tabler/index.html
+++ b/tabler/index.html
@@ -464,6 +464,9 @@
     colors = Array.from(Array(100), () => "#" + random().toString(16).substr(-6))
     var color = Chart.helpers.color;
 
+    $('body').tooltip({
+      selector: '[data-toggle="tooltip"]'
+    });
     var update_stat = function () {
       $.getJSON("/stat", function (data) {
         // update top chart
@@ -483,8 +486,10 @@
         })
         traffic_chart.data.datasets = datasets;
         traffic_chart.update();
+
         // update table
         var ovpn_table = $("#ovpn_table");
+        $('[data-toggle="tooltip"]').tooltip('hide');
         ovpn_table.empty();
         ovpn_table.append($(`<thead>
                     <tr>
@@ -492,6 +497,7 @@
                       <th>Status</th>
                       <th>Weight</th>
                       <th>Alive</th>
+                      <th>Ping</th>
                       <th>Actions</th>
                     </tr>
                   </thead>`))
@@ -503,7 +509,10 @@
                     <td class="text-muted">${instance.status}</td>
                     <td class="text-muted">${instance.weight}</td>
                     <td class="text-muted">
-                      <div class="chart-sparkline" id="sparkline-${index}"></div>
+                      <div class="chart-sparkline" id="alive-${index}"></div>
+                    </td>
+                    <td class="text-muted">
+                      <div class="chart-sparkline" id="ping-${index}"></div>
                     </td>
                     <td class="text-muted">
                       <a id="start_button_${instance.idx}" href="#!" data-placement="top" data-toggle="tooltip" title="start"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z"></path><path d="M18 15l-6-6l-6 6h12" transform="rotate(90 12 12)"></path></svg></a>
@@ -521,7 +530,7 @@
           tr.find(`#stop_button_${instance.idx}`).click(() => {
             $.get(`/stop?i=${instance.idx}`, update_stat);
           })
-          $().peity && $(`#sparkline-${index}`).text(instance.ping_rate.join(", ")).peity("line", {
+          $().peity && $(`#alive-${index}`).text(instance.ping_rate.join(", ")).peity("line", {
             width: 64,
             height: 40,
             stroke: "#206bc4",
@@ -529,14 +538,28 @@
             fill: ["#d2e1f3"],
             padding: .2,
           });
-          $('[data-toggle="tooltip"]').tooltip()
+          $().peity && $(`#ping-${index}`).text(instance.ping_mean.join(", ")).peity("bar", {
+            width: 64,
+            height: 40,
+            stroke: "#206bc4",
+            strokeWidth: 2,
+            fill: function (_, i, all) {
+              if (instance.ping_rate[i] == 0) {
+                return "#ee1111"
+              } else {
+                return "#206bc4"
+              }
+            },
+            padding: .2,
+            max: 200
+          });
         });
 
 
       });
     }
     update_stat();
-    setInterval(update_stat, 5000);
+    setInterval(update_stat, 1000);
   </script>