Charts "columnChart" and "stackedColumnChart" now support beforeDraw() which will check the data to see if the chart should be drawn. This cleans up the front page for new users and empty months.

public/js/charts.js

@@ -27,16 +27,16 @@ var colourSet = [
 // Settings object that controls default parameters for library methods:
 accounting.settings = {
     currency: {
-        symbol : currencySymbol,   // default currency symbol is '$'
+        symbol: currencySymbol,   // default currency symbol is '$'
         format: "%s %v", // controls output: %s = symbol, %v = value/number (can be object: see below)
-        decimal : mon_decimal_point,  // decimal point separator
+        decimal: mon_decimal_point,  // decimal point separator
         thousand: mon_thousands_sep,  // thousands separator
-        precision : frac_digits   // decimal places
+        precision: frac_digits   // decimal places
     },
     number: {
-        precision : 0,  // default precision on numbers is 0
+        precision: 0,  // default precision on numbers is 0
         thousand: ",",
-        decimal : "."
+        decimal: "."
     }
 };
 
@@ -92,7 +92,7 @@ var defaultLineOptions = {
     datasetFill: false,
     scaleFontSize: 10,
     responsive: false,
-    scaleLabel:      "<%= '" + currencySymbol + " ' + Number(value).toFixed(0).replace('.', ',') %>",
+    scaleLabel: "<%= '" + currencySymbol + " ' + Number(value).toFixed(0).replace('.', ',') %>",
     tooltipFillColor: "rgba(0,0,0,0.5)",
     tooltipTemplate: "<%if (label){%><%=label%>: <%}%>" + currencySymbol + " <%= value %>",
     multiTooltipTemplate: "<%=datasetLabel%>: <%= '" + currencySymbol + " ' + Number(value).toFixed(2).replace('.', ',') %>"
@@ -107,9 +107,9 @@ var defaultColumnOptions = {
     scaleFontSize: 10,
     responsive: false,
     animation: false,
-    scaleLabel:           "<%= accounting.formatMoney(value) %>",
+    scaleLabel: "<%= accounting.formatMoney(value) %>",
     tooltipFillColor: "rgba(0,0,0,0.5)",
-    tooltipTemplate:      "<%if (label){%><%=label%>: <%}%> <%= accounting.formatMoney(value) %>",
+    tooltipTemplate: "<%if (label){%><%=label%>: <%}%> <%= accounting.formatMoney(value) %>",
     multiTooltipTemplate: "<%=datasetLabel%>: <%= accounting.formatMoney(value) %>"
 };
 
@@ -122,7 +122,7 @@ var defaultStackedColumnOptions = {
     animation: false,
     scaleFontSize: 10,
     responsive: false,
-    scaleLabel:           "<%= accounting.formatMoney(value) %>",
+    scaleLabel: "<%= accounting.formatMoney(value) %>",
     tooltipFillColor: "rgba(0,0,0,0.5)",
     multiTooltipTemplate: "<%=datasetLabel%>: <%= accounting.formatMoney(value) %>"
 
@@ -204,8 +204,19 @@ function areaChart(URL, container, options) {
 function columnChart(URL, container, options) {
     "use strict";
 
+    options = options || {};
+
     $.getJSON(URL).success(function (data) {
 
+        var result = true;
+        if (options.beforeDraw) {
+            result = options.beforeDraw(data, {url: URL, container: container});
+        }
+        if (result === false) {
+            return;
+        }
+        console.log('Will draw columnChart(' + URL + ')');
+
         var ctx = document.getElementById(container).getContext("2d");
         var newData = {};
         newData.datasets = [];
@@ -240,6 +251,15 @@ function stackedColumnChart(URL, container, options) {
 
     $.getJSON(URL).success(function (data) {
 
+        var result = true;
+        if (options.beforeDraw) {
+            result = options.beforeDraw(data, {url: URL, container: container});
+        }
+        if (result === false) {
+            return;
+        }
+
+
         var ctx = document.getElementById(container).getContext("2d");
         var newData = {};
         newData.datasets = [];

public/js/index.js

@@ -34,14 +34,37 @@ function drawChart() {
     "use strict";
     areaChart('chart/account/frontpage', 'accounts-chart');
     pieChart('chart/bill/frontpage', 'bills-chart');
-    stackedColumnChart('chart/budget/frontpage', 'budgets-chart');
+    stackedColumnChart('chart/budget/frontpage', 'budgets-chart', {beforeDraw: beforeDrawIsEmpty});
-    columnChart('chart/category/frontpage', 'categories-chart');
+    columnChart('chart/category/frontpage', 'categories-chart', {beforeDraw: beforeDrawIsEmpty});
-    columnChart('chart/account/expense', 'expense-accounts-chart');
+    columnChart('chart/account/expense', 'expense-accounts-chart', {beforeDraw: beforeDrawIsEmpty});
 
 
     getBoxAmounts();
 }
 
+/**
+ * Removes a chart container if there is nothing for the chart to draw.
+ *
+ * @param data
+ * @param options
+ * @returns {boolean}
+ */
+function beforeDrawIsEmpty(data, options) {
+    "use strict";
+
+    // check if chart holds data.
+    if (data.labels.length === 0) {
+        // remove the chart container + parent
+        console.log(options.container + ' appears empty. Removed.');
+        $('#' + options.container).parent().parent().remove();
+
+        // return false so script stops.
+        return false;
+    }
+    return true;
+}
+
+
 function getBoxAmounts() {
     "use strict";
     var boxes = ['in', 'out', 'bills-unpaid', 'bills-paid'];