From 951a09e7f5c3716b04a14cded6dd262d70b6ea02 Mon Sep 17 00:00:00 2001
From: mantaohuang <mantao@mit.edu>
Date: Tue, 28 Jul 2020 11:53:40 -0400
Subject: [PATCH] change to chartjs

---
 plot_gen.py       |   2 +-
 tabler/index.html | 206 ++++++++++++++++++++++++++--------------------
 2 files changed, 117 insertions(+), 91 deletions(-)

diff --git a/plot_gen.py b/plot_gen.py
index 99a5abb..19531ff 100644
--- a/plot_gen.py
+++ b/plot_gen.py
@@ -35,7 +35,7 @@ class TimeSeriesAccumulator:
         return result
 
     def get_ts(self):
-        return [datetime.utcfromtimestamp(self.start_timestamp+(i+1)*self.bin_time) for i in range(self.n_bins)]
+        return [datetime.utcfromtimestamp(int(self.start_timestamp+(i+1)*self.bin_time)) for i in range(self.n_bins)]
 
 
 if __name__ == "__main__":
diff --git a/tabler/index.html b/tabler/index.html
index c5a593b..df05d8e 100644
--- a/tabler/index.html
+++ b/tabler/index.html
@@ -299,7 +299,7 @@
                     </div>
                   </div>
                 </div>
-                <div id="chart-mentions" class="chart-lg"></div>
+                <canvas id="chart-traffic" class="chart-lg"></canvas>
               </div>
             </div>
           </div>
@@ -426,100 +426,126 @@
   <script src="./dist/libs/jqvmap/dist/jquery.vmap.min.js"></script>
   <script src="./dist/libs/jqvmap/dist/maps/jquery.vmap.world.js"></script>
   <script src="./dist/libs/peity/jquery.peity.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.bundle.min.js"
+    integrity="sha256-TQq84xX6vkwR0Qs1qH5ADkP+MvH0W+9E7TdHJsoIQiM=" crossorigin="anonymous"></script>
   <!-- Tabler Core -->
   <script src="./dist/js/tabler.min.js"></script>
 
   <script>
-var load_stat = function(){    
-$.getJSON("/stat", function (data) {
-	// @formatter:off
-        window.ApexCharts && (new ApexCharts(document.getElementById('chart-mentions'), {
-          chart: {
-            type: "line",
-            fontFamily: 'inherit',
-            height: 240,
-            parentHeightOffset: 0,
-            toolbar: {
-              show: false,
+    var ctx = document.getElementById('chart-traffic').getContext('2d');
+    var config = {
+      type: 'line',
+      data: {
+        datasets: []
+      },
+      options: {
+        responsive: true,
+        title: {
+          display: true,
+          text: 'Chart.js Time Point Data'
+        },
+        scales: {
+          xAxes: [{
+            type: 'time',
+            display: true,
+            scaleLabel: {
+              display: true,
+              labelString: 'Date'
             },
-            animations: {
-              enabled: false
-            },
-            stacked: true,
-          },
-          plotOptions: {
-            bar: {
-              columnWidth: '50%',
-            }
-          },
-          dataLabels: {
-            enabled: false,
-          },
-          fill: {
-            opacity: 0.6,
-          },
-          series: [{
-            name: "Down rate",
-            data: data.stat[0].io_mean
-          }, {
-            name: "Up rate",
-            data: data.stat[0].io_mean
-          }, {
-            name: "d rate",
-            data: data.stat[0].io_mean
-          }],
-          grid: {
-            padding: {
-              top: -20,
-              right: 0,
-              left: -4,
-              bottom: -4
-            },
-            strokeDashArray: 4,
-            xaxis: {
-              lines: {
-                show: true
+            ticks: {
+              major: {
+                fontStyle: 'bold',
+                fontColor: '#FF0000'
               }
-            },
-          },
-          xaxis: {
-            labels: {
-              padding: 0
-            },
-            tooltip: {
-              enabled: false
-            },
-            axisBorder: {
-              show: false,
-            },
-            type: 'datetime',
-          },
-          yaxis: {
-            labels: {
-              padding: 4
-            },
-          },
-          labels: data.time,
-          colors: ["#206bc4", "#79a6dc", "#bfe399"],
-          legend: {
-            show: true,
-            position: 'bottom',
-            height: 32,
-            offsetY: 8,
-            markers: {
-              width: 8,
-              height: 8,
-              radius: 100,
-            },
-            itemMargin: {
-              horizontal: 8,
-            },
-          },
-        })).render();
-      // @formatter:on
-    });
-};
-load_stat();
+            }
+          }],
+          yAxes: [{
+            display: true,
+            scaleLabel: {
+              display: true,
+              labelString: 'value'
+            }
+          }]
+        }
+      }
+    };
+    var myChart = new Chart(ctx, config);
+    /*
+    {
+					label: 'Dataset with string point data',
+					backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
+					borderColor: window.chartColors.red,
+					fill: false,
+					data: [{
+						x: newDateString(0),
+						y: randomScalingFactor()
+					}, {
+						x: newDateString(2),
+						y: randomScalingFactor()
+					}, {
+						x: newDateString(4),
+						y: randomScalingFactor()
+					}, {
+						x: newDateString(5),
+						y: randomScalingFactor()
+					}],
+				}, {
+					label: 'Dataset with date object point data',
+					backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
+					borderColor: window.chartColors.blue,
+					fill: false,
+					data: [{
+						x: newDate(0),
+						y: randomScalingFactor()
+					}, {
+						x: newDate(2),
+						y: randomScalingFactor()
+					}, {
+						x: newDate(4),
+						y: randomScalingFactor()
+					}, {
+						x: newDate(5),
+						y: randomScalingFactor()
+					}]
+				}
+    */
+    var random = (function () {
+      var seed = 0x2F6E2B1;
+      return function () {
+        // Robert Jenkins’ 32 bit integer hash function
+        seed = ((seed + 0x7ED55D16) + (seed << 12)) & 0xFFFFFFFF;
+        seed = ((seed ^ 0xC761C23C) ^ (seed >>> 19)) & 0xFFFFFFFF;
+        seed = ((seed + 0x165667B1) + (seed << 5)) & 0xFFFFFFFF;
+        seed = ((seed + 0xD3A2646C) ^ (seed << 9)) & 0xFFFFFFFF;
+        seed = ((seed + 0xFD7046C5) + (seed << 3)) & 0xFFFFFFFF;
+        seed = ((seed ^ 0xB55A4F09) ^ (seed >>> 16)) & 0xFFFFFFFF;
+        return (seed & 0xFFFFFFF) / 0x10000000;
+      };
+    }());
+    colors = Array.from(Array(100), () => "#" + Math.floor(random() * 16777215).toString(16))
+    var color = Chart.helpers.color;
+    var update_stat = function () {
+      $.getJSON("/stat", function (data) {
+        var datasets = data.stat.map((value, index) => {
+          return {
+            label: `Connection ${index}`,
+            backgroundColor: color(colors[index]).alpha(0.5).rgbString(),
+            borderColor: colors[index],
+            fill: false,
+            data: value.io_mean.map((value, index) => {
+              return {
+                x: data.time[index],
+                y: value,
+              }
+            }),
+          }
+        })
+        myChart.data.datasets = datasets;
+        myChart.update();
+      });
+    }
+    update_stat();
+    setInterval(update_stat, 5000);
   </script>
 
 
@@ -602,4 +628,4 @@ load_stat();
   </script>
 </body>
 
-</html>
+</html>
\ No newline at end of file