change to chartjs

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__":

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(){    
+    var ctx = document.getElementById('chart-traffic').getContext('2d');
-$.getJSON("/stat", function (data) {
+    var config = {
-	// @formatter:off
+      type: 'line',
-        window.ApexCharts && (new ApexCharts(document.getElementById('chart-mentions'), {
+      data: {
-          chart: {
+        datasets: []
-            type: "line",
+      },
-            fontFamily: 'inherit',
+      options: {
-            height: 240,
+        responsive: true,
-            parentHeightOffset: 0,
+        title: {
-            toolbar: {
+          display: true,
-              show: false,
+          text: 'Chart.js Time Point Data'
+        },
+        scales: {
+          xAxes: [{
+            type: 'time',
+            display: true,
+            scaleLabel: {
+              display: true,
+              labelString: 'Date'
             },
-            animations: {
+            ticks: {
-              enabled: false
+              major: {
-            },
+                fontStyle: 'bold',
-            stacked: true,
+                fontColor: '#FF0000'
-          },
-          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
               }
-            },
+            }
-          },
+          }],
-          xaxis: {
+          yAxes: [{
-            labels: {
+            display: true,
-              padding: 0
+            scaleLabel: {
-            },
+              display: true,
-            tooltip: {
+              labelString: 'value'
-              enabled: false
+            }
-            },
+          }]
-            axisBorder: {
+        }
-              show: false,
+      }
-            },
+    };
-            type: 'datetime',
+    var myChart = new Chart(ctx, config);
-          },
+    /*
-          yaxis: {
+    {
-            labels: {
+					label: 'Dataset with string point data',
-              padding: 4
+					backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
-            },
+					borderColor: window.chartColors.red,
-          },
+					fill: false,
-          labels: data.time,
+					data: [{
-          colors: ["#206bc4", "#79a6dc", "#bfe399"],
+						x: newDateString(0),
-          legend: {
+						y: randomScalingFactor()
-            show: true,
+					}, {
-            position: 'bottom',
+						x: newDateString(2),
-            height: 32,
+						y: randomScalingFactor()
-            offsetY: 8,
+					}, {
-            markers: {
+						x: newDateString(4),
-              width: 8,
+						y: randomScalingFactor()
-              height: 8,
+					}, {
-              radius: 100,
+						x: newDateString(5),
-            },
+						y: randomScalingFactor()
-            itemMargin: {
+					}],
-              horizontal: 8,
+				}, {
-            },
+					label: 'Dataset with date object point data',
-          },
+					backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
-        })).render();
+					borderColor: window.chartColors.blue,
-      // @formatter:on
+					fill: false,
-    });
+					data: [{
-};
+						x: newDate(0),
-load_stat();
+						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>