Stop distorting x axis

4 years ago · b888dafa66
4 changed files with 16 additions and 8 deletions
--- a/ISPChk/Properties/launchSettings.json
+++ b/ISPChk/Properties/launchSettings.json
@ -4,7 +4,7 @@
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
-      "applicationUrl": "http://0.0.0.0:4223",
+      "applicationUrl": "http://localhost:4223",
      "sslPort": 0
    }
  },
--- a/ISPChk/ispchk.db
+++ b/ISPChk/ispchk.db
--- a/ISPChk/wwwroot/index.html
+++ b/ISPChk/wwwroot/index.html
@ -5,7 +5,7 @@
    <title>ISPChk</title>
    <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="jquery/jquery.js"></script>
-    <script src="Chart.js/Chart.min.js"></script>
+    <script src="Chart.js/Chart.bundle.min.js"></script>
 </head>
 <body>
    <div class="container">
--- a/ISPChk/wwwroot/ispchk.js
+++ b/ISPChk/wwwroot/ispchk.js
@ -47,11 +47,12 @@ async function fetchPings(hostId, start, end) {
 async function transformChartData(pings) {
    var res = { date: [], min: [], avg: [], max: [], failures: []};
    for (let ping of pings) {
-        res.date.push(ping.date);
-        res.min.push(ping.min);
-        res.avg.push(ping.avg);
-        res.max.push(ping.max);
-        res.failures.push(ping.failures);
+        var jsDate = new Date(ping.date);
+        //res.date.push(ping.date);
+        res.min.push({ x: jsDate, y: ping.min });
+        res.avg.push({ x: jsDate, y: ping.avg });
+        res.max.push({ x: jsDate, y: ping.max });
+        res.failures.push({ x: jsDate, y: ping.failures });
    }
    return res;
 }
@ -71,7 +72,7 @@ async function updateGraphs() {
        charts[host.hostId] = new Chart(ctx, {
            type: 'line',
            data: {
-                labels: val.date,
+                //labels: val.date,
                datasets: [
                    {
                        label: 'min',
@ -102,6 +103,13 @@ async function updateGraphs() {
                    text: host.name
                },
                scales: {
+                    xAxes: [{
+                        type: 'time',
+                        distribution: 'linear',
+                        time: {
+                            unit: 'hour'
+                        }
+                    }],
                    yAxes: [
                        {
                            id: "y-latency",