Changed how we pass the x axis data to Chart.js to allow for meaning full tooltips in between the full hours.

js/pihole/index.js

@@ -59,6 +59,15 @@ $(document).ready(function() {
                 display: false
             },
             scales: {
+                xAxes: [{
+                    type: 'time',
+                    time: {
+                        unit: 'hour',
+                        displayFormats: {
+                            hour: 'hh:mm'
+                        }
+                    }
+                }],
                 yAxes: [{
                     ticks: {
                         beginAtZero: true
@@ -157,16 +166,9 @@ function updateQueriesOverTime() {
     $.getJSON("api.php?overTimeData10mins", function(data) {
         // Add data for each hour that is available
         for (hour in data.ads_over_time) {
-            // Add x-axis label
-            if(hour%6 == 0)
-            {
-                timeLineChart.data.labels.push(hour/6 + ":00");
-            }
-            else
-            {
-                timeLineChart.data.labels.push("");
-                //timeLineChart.data.labels.push(Math.floor(hour/6) + ":" + hour%6 +"0");
-            }
+            var d = new Date();
+            d.setHours(Math.floor(hour/6),10*(hour%6),0,0);
+            timeLineChart.data.labels.push(d);
             // Have to multiply the data by 6 to have again the correct units (per hour, not per 10min)
             timeLineChart.data.datasets[0].data.push(6*data.domains_over_time[hour]);
             timeLineChart.data.datasets[1].data.push(6*data.ads_over_time[hour]);