diff --git a/scripts/pi-hole/js/db_graph.js b/scripts/pi-hole/js/db_graph.js index 6c2dbbe8..d1c2f2ac 100644 --- a/scripts/pi-hole/js/db_graph.js +++ b/scripts/pi-hole/js/db_graph.js @@ -151,7 +151,7 @@ $(function () { var blockedColor = "#999"; var permittedColor = "#00a65a"; timeLineChart = new Chart(ctx, { - type: "bar", + type: utils.getGraphType(), data: { labels: [], datasets: [ diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js index 7ffdaeaf..d6b479e7 100644 --- a/scripts/pi-hole/js/index.js +++ b/scripts/pi-hole/js/index.js @@ -783,12 +783,9 @@ $(function () { var permittedColor = $(".queries-permitted").css("background-color"); var gridColor = $(".graphs-grid").css("background-color"); var ticksColor = $(".graphs-ticks").css("color"); - - var graphType = localStorage.getItem("barchart_chkbox") === "true" ? "bar" : "line"; - var ctx = document.getElementById("queryOverTimeChart").getContext("2d"); timeLineChart = new Chart(ctx, { - type: graphType, + type: utils.getGraphType(), data: { labels: [], datasets: [ @@ -906,7 +903,7 @@ $(function () { if (clientsChartEl) { ctx = clientsChartEl.getContext("2d"); clientsChart = new Chart(ctx, { - type: graphType, + type: utils.getGraphType(), data: { labels: [], datasets: [{ data: [] }] diff --git a/scripts/pi-hole/js/utils.js b/scripts/pi-hole/js/utils.js index 62deb504..4e5a4af6 100644 --- a/scripts/pi-hole/js/utils.js +++ b/scripts/pi-hole/js/utils.js @@ -207,6 +207,11 @@ function stateLoadCallback(itemName) { return data; } +function getGraphType() { + // Only return line if `barchart_chkbox` is explicitly set to false. Else return bar + return localStorage.getItem("barchart_chkbox") === "false" ? "line" : "bar"; +} + window.utils = (function () { return { escapeHtml: escapeHtml, @@ -220,6 +225,7 @@ window.utils = (function () { validateIPv6CIDR: validateIPv6CIDR, setBsSelectDefaults: setBsSelectDefaults, stateSaveCallback: stateSaveCallback, - stateLoadCallback: stateLoadCallback + stateLoadCallback: stateLoadCallback, + getGraphType: getGraphType }; })();