Updated script to work with updated version of Chart.js. They redesigned the whole interface and a complete rewrite was necessary.

index.php

@@ -65,7 +65,7 @@
         </div>
         <div class="box-body">
           <div class="chart">
-            <canvas id="queryOverTimeChart" style="height: 247px; width: 466px;" width="932" height="494"></canvas>
+            <canvas id="queryOverTimeChart" style="height: 247px; width: 466px;" width="932" height="200"></canvas>
           </div>
         </div>
         <div class="overlay">
@@ -84,7 +84,7 @@
         </div>
         <div class="box-body">
           <div class="chart">
-            <canvas id="queryTypeChart" style="height: 247px; width: 466px;" width="932" height="494"></canvas>
+            <canvas id="queryTypeChart" style="height: 247px; width: 466px;" width="932" height="400"></canvas>
           </div>
         </div>
         <div class="overlay">
@@ -100,7 +100,7 @@
         </div>
         <div class="box-body">
           <div class="chart">
-            <canvas id="forwardDestinationChart" style="height: 247px; width: 466px;" width="932" height="494"></canvas>
+            <canvas id="forwardDestinationChart" style="height: 247px; width: 466px;" width="932" height="400"></canvas>
           </div>
         </div>
         <div class="overlay">

js/pihole/index.js

@@ -13,24 +13,6 @@ $(document).ready(function() {
 
     updateTopLists();
 
-    // Create charts
-    var chartData = {
-        labels: [],
-        datasets: [
-            {
-                label: "All Queries",
-                fillColor: "rgba(220,220,220,0.5)",
-                strokeColor: "rgba(0, 166, 90,.8)",
-                pointColor: "rgba(0, 166, 90,.8)"
-            },
-            {
-                label: "Ad Queries",
-                fillColor: "rgba(0,192,239,0.5)",
-                strokeColor: "rgba(0,192,239,1)",
-                pointColor: "rgba(0,192,239,1)"
-            }
-        ]
-    };
     var isMobile = {
         Windows: function() {
             return /IEMobile/i.test(navigator.userAgent);
@@ -50,32 +32,73 @@ $(document).ready(function() {
     };
     var animate = false;
     var ctx = document.getElementById("queryOverTimeChart").getContext("2d");
-    timeLineChart = new Chart(ctx).Line(chartData,
-        {
-            pointDot : false,
-            legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
-            animation : animate
+    timeLineChart = new Chart(ctx, {
+        type: 'line',
+        data: {
+            labels: [],
+            datasets: [
+                {
+                    label: "All Queries",
+                    fill: true,
+                    backgroundColor: "rgba(220,220,220,0.5)",
+                    borderColor: "rgba(0, 166, 90,.8)",
+                    pointBorderColor: "rgba(0, 166, 90,.8)",
+                    pointRadius: 0,
+                    data: []
+                },
+                {
+                    label: "Ad Queries",
+                    fill: true,
+                    backgroundColor: "rgba(0,192,239,0.5)",
+                    borderColor: "rgba(0,192,239,1)",
+                    pointBorderColor: "rgba(0,192,239,1)",
+                    pointRadius: 0,
+                    data: []
+                }
+            ]
+        },
+        options: {
+            tooltips: {
+                enabled: true,
+                mode: 'x-axis'
+            }
         }
-    );
+    });
 
     ctx = document.getElementById("queryTypeChart").getContext("2d");
-    queryTypeChart = new Chart(ctx).Doughnut([],
-        {
-            legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].strokeColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>",
-            animation : animate
+    queryTypeChart = new Chart(ctx, {
+        type: 'doughnut',
+        data: {
+            labels: [],
+            datasets: [{
+                data: []
+            }]
+        },
+        options: {
+            legend: {
+                display: false
+            }
         }
-    );
+    });
 
     ctx = document.getElementById("forwardDestinationChart").getContext("2d");
-    forwardDestinationChart = new Chart(ctx).Doughnut([],
-        {
-            legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].strokeColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>",
-            animation : animate
+    forwardDestinationChart = new Chart(ctx, {
+        type: 'doughnut',
+        data: {
+            labels: [],
+            datasets: [{
+                data: []
+            }]
+        },
+        options: {
+            legend: {
+                display: false
+            }
         }
-    );
+    });
 });
 
-// Functions to oupdate data in page
+// Functions to update data in page
 
 function updateSummaryData(runOnce) {
     $.getJSON("api.php?summary", function LoadSummaryData(data) {
@@ -110,11 +133,39 @@ function updateSummaryData(runOnce) {
 
 function updateQueriesOverTime() {
     $.getJSON("api.php?overTimeData", function(data) {
+        // Add data for each hour that is available
         for (hour in data.ads_over_time) {
-            timeLineChart.addData([data.domains_over_time[hour], data.ads_over_time[hour]], hour + ":00");
+            // Add x-axis label
+            timeLineChart.data.labels.push(hour + ":00");
+            timeLineChart.data.datasets.forEach(function(dataset, index) {
+                // Add data to line with index 0 or 1
+                if(index == 0) dataset.data.push(data.domains_over_time[hour]);
+                if(index == 1) dataset.data.push(data.ads_over_time[hour]);
+            });
         }
         $('#queries-over-time .overlay').remove();
-        //$('#queries-over-time').append(timeLineChart.generateLegend());
+        timeLineChart.update();
+    });
+}
+
+function updateQueryTypes() {
+    $.getJSON("api.php?getQueryTypes", function(data) {
+        var colors = [];
+        // Get colors from AdminLTE
+        $.each($.AdminLTE.options.colors, function(key, value) { colors.push(value); });
+        var v = [], c = [];
+        // Collect values and colors, immediately push individual labels
+        $.each(data, function(key , value) {
+            v.push(value);
+            c.push(colors.shift());
+            queryTypeChart.data.labels.push(key.substr(6,key.length - 7));
+        });
+        // Build a single dataset with the data to be pushed
+        var dd = {data: v, backgroundColor: c};
+        // and push it at once
+        queryTypeChart.data.datasets.push(dd);
+        $('#query-types .overlay').remove();
+        queryTypeChart.update();
     });
 }
 
@@ -131,35 +182,24 @@ function updateTopClientsChart() {
     });
 }
 
-function updateQueryTypes() {
-    $.getJSON("api.php?getQueryTypes", function(data) {
-        var colors = [];
-        $.each($.AdminLTE.options.colors, function(key, value) { colors.push(value); });
-        $.each(data, function(key , value) {
-            queryTypeChart.addData({
-                value: value,
-                color: colors.shift(),
-                label: key.substr(6,key.length - 7)
-            });
-        });
-        $('#query-types .overlay').remove();
-        //$('#query-types').append(queryTypeChart.generateLegend());
-    });
-}
-
 function updateForwardDestinations() {
     $.getJSON("api.php?getForwardDestinations", function(data) {
         var colors = [];
+        // Get colors from AdminLTE
         $.each($.AdminLTE.options.colors, function(key, value) { colors.push(value); });
+        var v = [], c = [];
+        // Collect values and colors, immediately push individual labels
         $.each(data, function(key , value) {
-            forwardDestinationChart.addData({
-                value: value,
-                color: colors.shift(),
-                label: key
-            });
+            v.push(value);
+            c.push(colors.shift());
+            forwardDestinationChart.data.labels.push(key);
         });
+        // Build a single dataset with the data to be pushed
+        var dd = {data: v, backgroundColor: c};
+        // and push it at once
+        forwardDestinationChart.data.datasets.push(dd);
         $('#forward-destinations .overlay').remove();
-        //$('#forward-destinations').append(forwardDestinationChart.generateLegend());
+        forwardDestinationChart.update();
     });
 }
 
@@ -182,4 +222,4 @@ function updateTopLists() {
         $('#domain-frequency .overlay').remove();
         $('#ad-frequency .overlay').remove();
     });
-}
+}