Renamed google chart methods and data.

config/firefly.php

@@ -1,6 +1,7 @@
 <?php
 
 return [
+    'chart'                    => 'google', // or 'chartjs'
     'version'                  => '3.4.5',
     'index_periods'            => ['1D', '1W', '1M', '3M', '6M', '1Y', 'custom'],
     'budget_periods'           => ['daily', 'weekly', 'monthly', 'quarterly', 'half-year', 'yearly'],

public/js/accounts.js

@@ -1,4 +1,4 @@
-/* global $, googleLineChart, accountID, token */
+/* global $, lineChart, accountID, token */
 
 
 // Return a helper with preserved width of cells
@@ -12,8 +12,8 @@ var fixHelper = function (e, ui) {
 
 $(function () {
     "use strict";
-    if (typeof(googleLineChart) === "function" && typeof accountID !== 'undefined') {
+    if (typeof(lineChart) === "function" && typeof accountID !== 'undefined') {
-        googleLineChart('chart/account/' + accountID, 'overview-chart');
+        lineChart('chart/account/' + accountID, 'overview-chart');
     }
 
     // sortable!

public/js/bills.js

@@ -1,9 +1,9 @@
-/* global googleComboChart, billID */
+/* global comboChart, billID */
 
 $(document).ready(function () {
                       "use strict";
-                      if (typeof(googleComboChart) === 'function' && typeof(billID) !== 'undefined') {
+                      if (typeof(comboChart) === 'function' && typeof(billID) !== 'undefined') {
-                          googleComboChart('chart/bill/' + billID, 'bill-overview');
+                          comboChart('chart/bill/' + billID, 'bill-overview');
                       }
                   }
 );

public/js/budgets.js

@@ -1,4 +1,4 @@
-/* globals $, budgeted:true, currencySymbol, budgetIncomeTotal ,budgetedMuch, budgetedPercentage, token, budgetID, repetitionID, spent, googleLineChart */
+/* globals $, budgeted:true, currencySymbol, budgetIncomeTotal, columnChart,  budgetedMuch, budgetedPercentage, token, budgetID, repetitionID, spent, lineChart */
 
 function drawSpentBar() {
     "use strict";
@@ -104,10 +104,10 @@ $(function () {
      Draw the charts, if necessary:
      */
     if (typeof budgetID !== 'undefined' && typeof repetitionID === 'undefined') {
-        googleColumnChart('chart/budget/' + budgetID, 'budgetOverview');
+        columnChart('chart/budget/' + budgetID, 'budgetOverview');
     }
     if (typeof budgetID !== 'undefined' && typeof repetitionID !== 'undefined') {
-        googleLineChart('chart/budget/' + budgetID + '/' + repetitionID, 'budgetOverview');
+        lineChart('chart/budget/' + budgetID + '/' + repetitionID, 'budgetOverview');
     }
 
 });

public/js/categories.js

@@ -1,9 +1,9 @@
-/* globals $, categoryID, googleColumnChart */
+/* globals $, categoryID, columnChart */
 $(function () {
     "use strict";
     if (typeof categoryID !== 'undefined') {
-        googleColumnChart('chart/category/' + categoryID + '/all', 'all');
+        columnChart('chart/category/' + categoryID + '/all', 'all');
-        googleColumnChart('chart/category/' + categoryID + '/month', 'month');
+        columnChart('chart/category/' + categoryID + '/month', 'month');
     }
 
 

public/js/gcharts.js

@@ -1,8 +1,222 @@
-/* globals currencyCode,defaultAreaChartOptions , language, defaultPieChartOptions, defaultLineChartOptions, defaultColumnChartOptions, defaultBarChartOptions, defaultStackedColumnChartOptions, defaultComboChartOptions */
+/* globals currencyCode, language */
-/* exported googleLineChart, googleBarChart, googleColumnChart, googleStackedColumnChart, googleComboChart, googlePieChart */
+/* exported lineChart, googleColumnChart, stackedColumnChart, comboChart, pieChart, defaultLineChartOptions, defaultAreaChartOptions, defaultBarChartOptions, defaultComboChartOptions, defaultColumnChartOptions, defaultStackedColumnChartOptions, defaultPieChartOptions */
 var google = google || {};
 google.load('visualization', '1.1', {'packages': ['corechart', 'bar', 'line'], 'language': language});
 
+
+/* exported   */
+
+var defaultLineChartOptions = {
+    curveType: 'function',
+    legend: {
+        position: 'none'
+    },
+    interpolateNulls: true,
+    lineWidth: 1,
+    chartArea: {
+        left: 50,
+        top: 10,
+        width: '95%',
+        height: '90%'
+    },
+    height: 400,
+    colors: ["#357ca5", "#008d4c", "#db8b0b", "#ca195a", "#555299", "#4285f4", "#db4437", "#f4b400", "#0f9d58", "#ab47bc", "#00acc1", "#ff7043", "#9e9d24", "#5c6bc0", "#f06292", "#00796b", "#c2185b"],
+    hAxis: {
+        textStyle: {
+            color: '#838383',
+        },
+        baselineColor: '#aaaaaa',
+        gridlines: {
+            color: 'transparent'
+        }
+    },
+    fontSize: 11,
+    vAxis: {
+        textStyle: {
+            color: '#838383',
+        },
+        baselineColor: '#aaaaaa',
+        format: '\u20AC #'
+    }
+
+
+};
+
+var defaultAreaChartOptions = {
+    curveType: 'function',
+    legend: {
+        position: 'none'
+    },
+    interpolateNulls: true,
+    lineWidth: 1,
+    chartArea: {
+        left: 50,
+        top: 10,
+        width: '95%',
+        height: '90%'
+    },
+    height: 400,
+    colors: ["#357ca5", "#008d4c", "#db8b0b", "#ca195a", "#555299", "#4285f4", "#db4437", "#f4b400", "#0f9d58", "#ab47bc", "#00acc1", "#ff7043", "#9e9d24", "#5c6bc0", "#f06292", "#00796b", "#c2185b"],
+    hAxis: {
+        textStyle: {
+            color: '#838383',
+        },
+        baselineColor: '#aaaaaa',
+        gridlines: {
+            color: 'transparent'
+        }
+    },
+    fontSize: 11,
+    vAxis: {
+        textStyle: {
+            color: '#838383',
+        },
+        baselineColor: '#aaaaaa',
+        format: '\u20AC #'
+    }
+
+
+};
+
+var defaultBarChartOptions = {
+    height: 400,
+    bars: 'horizontal',
+    hAxis: {
+        textStyle: {
+            color: '#838383',
+        },
+        baselineColor: '#aaaaaa',
+        format: '\u20AC #'
+
+    },
+    fontSize: 11,
+    colors: ["#357ca5", "#008d4c", "#db8b0b", "#ca195a", "#555299", "#4285f4", "#db4437", "#f4b400", "#0f9d58", "#ab47bc", "#00acc1", "#ff7043", "#9e9d24", "#5c6bc0", "#f06292", "#00796b", "#c2185b"],
+    vAxis: {
+        textStyle: {
+            color: '#838383'
+        },
+        textPosition: 'in',
+        gridlines: {
+
+            color: 'transparent'
+        },
+        baselineColor: '#aaaaaa'
+    },
+    chartArea: {
+        left: 15,
+        top: 10,
+        width: '100%',
+        height: '90%'
+    },
+
+    legend: {
+        position: 'none'
+    }
+};
+
+var defaultComboChartOptions = {
+    height: 300,
+    chartArea: {
+        left: 75,
+        top: 10,
+        width: '100%',
+        height: '90%'
+    },
+    vAxis: {
+        minValue: 0,
+        format: '\u20AC #'
+    },
+    colors: ["#357ca5", "#008d4c", "#db8b0b", "#ca195a", "#555299", "#4285f4", "#db4437", "#f4b400", "#0f9d58", "#ab47bc", "#00acc1", "#ff7043", "#9e9d24", "#5c6bc0", "#f06292", "#00796b", "#c2185b"],
+    fontSize: 11,
+    legend: {
+        position: 'none'
+    },
+    series: {
+        0: {type: 'line'},
+        1: {type: 'line'},
+        2: {type: 'bars'}
+    },
+    bar: {groupWidth: 20}
+};
+
+var defaultColumnChartOptions = {
+    height: 400,
+    chartArea: {
+        left: 50,
+        top: 10,
+        width: '85%',
+        height: '80%'
+    },
+    fontSize: 11,
+    hAxis: {
+        textStyle: {
+            color: '#838383'
+        },
+        gridlines: {
+            color: 'transparent'
+        },
+        baselineColor: '#aaaaaa'
+
+    },
+    colors: ["#357ca5", "#008d4c", "#db8b0b", "#ca195a", "#555299", "#4285f4", "#db4437", "#f4b400", "#0f9d58", "#ab47bc", "#00acc1", "#ff7043", "#9e9d24", "#5c6bc0", "#f06292", "#00796b", "#c2185b"],
+    vAxis: {
+        textStyle: {
+            color: '#838383'
+        },
+        baselineColor: '#aaaaaa',
+        format: '\u20AC #'
+    },
+    legend: {
+        position: 'none'
+    }
+};
+
+var defaultStackedColumnChartOptions = {
+    height: 400,
+    chartArea: {
+        left: 50,
+        top: 10,
+        width: '85%',
+        height: '80%'
+    },
+    legend: {
+        position: 'none'
+    },
+    fontSize: 11,
+    isStacked: true,
+    colors: ["#357ca5", "#008d4c", "#db8b0b", "#ca195a", "#555299", "#4285f4", "#db4437", "#f4b400", "#0f9d58", "#ab47bc", "#00acc1", "#ff7043", "#9e9d24", "#5c6bc0", "#f06292", "#00796b", "#c2185b"],
+    hAxis: {
+        textStyle: {
+            color: '#838383',
+        },
+        gridlines: {
+            color: 'transparent'
+        }
+    },
+    vAxis: {
+        textStyle: {
+            color: '#838383',
+        },
+        format: '\u20AC #'
+    }
+};
+
+var defaultPieChartOptions = {
+    chartArea: {
+        left: 0,
+        top: 0,
+        width: '100%',
+        height: '100%'
+    },
+    fontSize: 11,
+    height: 200,
+    legend: {
+        position: 'none'
+    },
+    colors: ["#357ca5", "#008d4c", "#db8b0b", "#ca195a", "#555299", "#4285f4", "#db4437", "#f4b400", "#0f9d58", "#ab47bc", "#00acc1", "#ff7043", "#9e9d24", "#5c6bc0", "#f06292", "#00796b", "#c2185b"],
+};
+
+
 function googleChart(chartType, URL, container, options) {
     "use strict";
     if ($('#' + container).length === 1) {
@@ -74,38 +288,32 @@ function googleChart(chartType, URL, container, options) {
 }
 
 
-function googleLineChart(URL, container, options) {
+function lineChart(URL, container, options) {
     "use strict";
     return googleChart('line', URL, container, options);
 }
 
-function googleAreaChart(URL, container, options) {
+function areaChart(URL, container, options) {
     "use strict";
     return googleChart('area', URL, container, options);
 }
 
-
+function columnChart(URL, container, options) {
-function googleBarChart(URL, container, options) {
-    "use strict";
-    return googleChart('bar', URL, container, options);
-}
-
-function googleColumnChart(URL, container, options) {
     "use strict";
     return googleChart('column', URL, container, options);
 }
 
-function googleStackedColumnChart(URL, container, options) {
+function stackedColumnChart(URL, container, options) {
     "use strict";
     return googleChart('stackedColumn', URL, container, options);
 }
 
-function googleComboChart(URL, container, options) {
+function comboChart(URL, container, options) {
     "use strict";
     return googleChart('combo', URL, container, options);
 }
 
-function googlePieChart(URL, container, options) {
+function pieChart(URL, container, options) {
     "use strict";
     return googleChart('pie', URL, container, options);
 }

public/js/gcharts.options.js

@@ -1,212 +0,0 @@
-/* exported defaultLineChartOptions, defaultAreaChartOptions, defaultBarChartOptions, defaultComboChartOptions, defaultColumnChartOptions, defaultStackedColumnChartOptions, defaultPieChartOptions  */
-
-var defaultLineChartOptions = {
-    curveType: 'function',
-    legend: {
-        position: 'none'
-    },
-    interpolateNulls: true,
-    lineWidth: 1,
-    chartArea: {
-        left: 50,
-        top: 10,
-        width: '95%',
-        height: '90%'
-    },
-    height: 400,
-    colors: ["#357ca5", "#008d4c", "#db8b0b", "#ca195a", "#555299", "#4285f4", "#db4437", "#f4b400", "#0f9d58", "#ab47bc", "#00acc1", "#ff7043", "#9e9d24", "#5c6bc0", "#f06292", "#00796b", "#c2185b"],
-    hAxis: {
-        textStyle: {
-            color: '#838383',
-        },
-        baselineColor: '#aaaaaa',
-        gridlines: {
-            color: 'transparent'
-        }
-    },
-    fontSize: 11,
-    vAxis: {
-        textStyle: {
-            color: '#838383',
-        },
-        baselineColor: '#aaaaaa',
-        format: '\u20AC #'
-    }
-
-
-};
-
-var defaultAreaChartOptions = {
-    curveType: 'function',
-    legend: {
-        position: 'none'
-    },
-    interpolateNulls: true,
-    lineWidth: 1,
-    chartArea: {
-        left: 50,
-        top: 10,
-        width: '95%',
-        height: '90%'
-    },
-    height: 400,
-    colors: ["#357ca5", "#008d4c", "#db8b0b", "#ca195a", "#555299", "#4285f4", "#db4437", "#f4b400", "#0f9d58", "#ab47bc", "#00acc1", "#ff7043", "#9e9d24", "#5c6bc0", "#f06292", "#00796b", "#c2185b"],
-    hAxis: {
-        textStyle: {
-            color: '#838383',
-        },
-        baselineColor: '#aaaaaa',
-        gridlines: {
-            color: 'transparent'
-        }
-    },
-    fontSize: 11,
-    vAxis: {
-        textStyle: {
-            color: '#838383',
-        },
-        baselineColor: '#aaaaaa',
-        format: '\u20AC #'
-    }
-
-
-};
-
-var defaultBarChartOptions = {
-    height: 400,
-    bars: 'horizontal',
-    hAxis: {
-        textStyle: {
-            color: '#838383',
-        },
-        baselineColor: '#aaaaaa',
-        format: '\u20AC #'
-
-    },
-    fontSize: 11,
-    colors: ["#357ca5", "#008d4c", "#db8b0b", "#ca195a", "#555299", "#4285f4", "#db4437", "#f4b400", "#0f9d58", "#ab47bc", "#00acc1", "#ff7043", "#9e9d24", "#5c6bc0", "#f06292", "#00796b", "#c2185b"],
-    vAxis: {
-        textStyle: {
-            color: '#838383'
-        },
-        textPosition: 'in',
-        gridlines: {
-
-            color: 'transparent'
-        },
-        baselineColor: '#aaaaaa'
-    },
-    chartArea: {
-        left: 15,
-        top: 10,
-        width: '100%',
-        height: '90%'
-    },
-
-    legend: {
-        position: 'none'
-    }
-};
-
-var defaultComboChartOptions = {
-    height: 300,
-    chartArea: {
-        left: 75,
-        top: 10,
-        width: '100%',
-        height: '90%'
-    },
-    vAxis: {
-        minValue: 0,
-        format: '\u20AC #'
-    },
-    colors: ["#357ca5", "#008d4c", "#db8b0b", "#ca195a", "#555299", "#4285f4", "#db4437", "#f4b400", "#0f9d58", "#ab47bc", "#00acc1", "#ff7043", "#9e9d24", "#5c6bc0", "#f06292", "#00796b", "#c2185b"],
-    fontSize: 11,
-    legend: {
-        position: 'none'
-    },
-    series: {
-        0: {type: 'line'},
-        1: {type: 'line'},
-        2: {type: 'bars'}
-    },
-    bar: {groupWidth: 20}
-};
-
-var defaultColumnChartOptions = {
-    height: 400,
-    chartArea: {
-        left: 50,
-        top: 10,
-        width: '85%',
-        height: '80%'
-    },
-    fontSize: 11,
-    hAxis: {
-        textStyle: {
-            color: '#838383'
-        },
-        gridlines: {
-            color: 'transparent'
-        },
-        baselineColor: '#aaaaaa'
-
-    },
-    colors: ["#357ca5", "#008d4c", "#db8b0b", "#ca195a", "#555299", "#4285f4", "#db4437", "#f4b400", "#0f9d58", "#ab47bc", "#00acc1", "#ff7043", "#9e9d24", "#5c6bc0", "#f06292", "#00796b", "#c2185b"],
-    vAxis: {
-        textStyle: {
-            color: '#838383'
-        },
-        baselineColor: '#aaaaaa',
-        format: '\u20AC #'
-    },
-    legend: {
-        position: 'none'
-    }
-};
-
-var defaultStackedColumnChartOptions = {
-    height: 400,
-    chartArea: {
-        left: 50,
-        top: 10,
-        width: '85%',
-        height: '80%'
-    },
-    legend: {
-        position: 'none'
-    },
-    fontSize: 11,
-    isStacked: true,
-    colors: ["#357ca5", "#008d4c", "#db8b0b", "#ca195a", "#555299", "#4285f4", "#db4437", "#f4b400", "#0f9d58", "#ab47bc", "#00acc1", "#ff7043", "#9e9d24", "#5c6bc0", "#f06292", "#00796b", "#c2185b"],
-    hAxis: {
-        textStyle: {
-            color: '#838383',
-        },
-        gridlines: {
-            color: 'transparent'
-        }
-    },
-    vAxis: {
-        textStyle: {
-            color: '#838383',
-        },
-        format: '\u20AC #'
-    }
-};
-
-var defaultPieChartOptions = {
-    chartArea: {
-        left: 0,
-        top: 0,
-        width: '100%',
-        height: '100%'
-    },
-    fontSize: 11,
-    height: 200,
-    legend: {
-        position: 'none'
-    },
-    colors: ["#357ca5", "#008d4c", "#db8b0b", "#ca195a", "#555299", "#4285f4", "#db4437", "#f4b400", "#0f9d58", "#ab47bc", "#00acc1", "#ff7043", "#9e9d24", "#5c6bc0", "#f06292", "#00796b", "#c2185b"],
-};
-

public/js/index.js

@@ -1,13 +1,13 @@
-/* globals $, googleColumnChart, google, googleLineChart, googlePieChart, googleStackedColumnChart */
+/* globals $, columnChart, google, lineChart, pieChart, stackedColumnChart, areaChart */
 google.setOnLoadCallback(drawChart);
 
 
 function drawChart() {
     "use strict";
-    googleAreaChart('chart/account/frontpage', 'accounts-chart');
+    areaChart('chart/account/frontpage', 'accounts-chart');
-    googlePieChart('chart/bill/frontpage', 'bills-chart');
+    pieChart('chart/bill/frontpage', 'bills-chart');
-    googleStackedColumnChart('chart/budget/frontpage', 'budgets-chart');
+    stackedColumnChart('chart/budget/frontpage', 'budgets-chart');
-    googleColumnChart('chart/category/frontpage', 'categories-chart');
+    columnChart('chart/category/frontpage', 'categories-chart');
 
 
     getBoxAmounts();

public/js/piggy-banks.js

@@ -1,4 +1,4 @@
-/* globals $, googleLineChart, token, piggyBankID */
+/* globals $, lineChart, token, piggyBankID */
 
 // Return a helper with preserved width of cells
 var fixHelper = function (e, tr) {
@@ -17,8 +17,8 @@ $(function () {
     $('.addMoney').on('click', addMoney);
     $('.removeMoney').on('click', removeMoney);
 
-    if (typeof(googleLineChart) === 'function' && typeof(piggyBankID) !== 'undefined') {
+    if (typeof(lineChart) === 'function' && typeof(piggyBankID) !== 'undefined') {
-        googleLineChart('chart/piggyBank/' + piggyBankID, 'piggy-bank-history');
+        lineChart('chart/piggyBank/' + piggyBankID, 'piggy-bank-history');
     }
 
     $('#sortable tbody').sortable(

public/js/reports.js

@@ -1,4 +1,4 @@
-/* globals google, expenseRestShow:true, incomeRestShow:true, year, shared, month, hideTheRest, showTheRest, showTheRestExpense, hideTheRestExpense, googleColumnChart, googleLineChart, googleStackedColumnChart  */
+/* globals google, expenseRestShow:true, incomeRestShow:true, year, shared, month, hideTheRest, showTheRest, showTheRestExpense, hideTheRestExpense, columnChart, lineChart, stackedColumnChart */
 if (typeof(google) !== 'undefined') {
     google.setOnLoadCallback(drawChart);
 }
@@ -6,13 +6,13 @@ if (typeof(google) !== 'undefined') {
 
 function drawChart() {
     "use strict";
-    googleColumnChart('chart/report/in-out/' + year + shared, 'income-expenses-chart');
+    columnChart('chart/report/in-out/' + year + shared, 'income-expenses-chart');
-    googleColumnChart('chart/report/in-out-sum/' + year + shared, 'income-expenses-sum-chart');
+    columnChart('chart/report/in-out-sum/' + year + shared, 'income-expenses-sum-chart');
 
-    googleStackedColumnChart('chart/budget/year/' + year + shared, 'budgets');
+    stackedColumnChart('chart/budget/year/' + year + shared, 'budgets');
-    googleStackedColumnChart('chart/category/year/' + year + shared, 'categories');
+    stackedColumnChart('chart/category/year/' + year + shared, 'categories');
 
-    googleLineChart('/chart/account/month/' + year + '/' + month + shared, 'account-balances-chart');
+    lineChart('/chart/account/month/' + year + '/' + month + shared, 'account-balances-chart');
 }
 
 

resources/twig/accounts/index.twig

@@ -51,9 +51,10 @@
     </script>
 
     <!-- load the libraries and scripts necessary for Google Charts: -->
+    {% if Config.get('firefly.chart') == 'google' %}
         <script type="text/javascript" src="https://www.google.com/jsapi"></script>
-    <script type="text/javascript" src="js/gcharts.options.js"></script>
         <script type="text/javascript" src="js/gcharts.js"></script>
+    {% endif %}
     <script type="text/javascript" src="js/bootstrap-sortable.js"></script>
     <script type="text/javascript" src="js/accounts.js"></script>
 {% endblock %}

resources/twig/accounts/show.twig

@@ -53,9 +53,10 @@
         var accountID = {{ account.id }};
     </script>
     <!-- load the libraries and scripts necessary for Google Charts: -->
+    {% if Config.get('firefly.chart') == 'google' %}
         <script type="text/javascript" src="https://www.google.com/jsapi"></script>
-    <script type="text/javascript" src="js/gcharts.options.js"></script>
         <script type="text/javascript" src="js/gcharts.js"></script>
+    {% endif %}
     <script src="js/jquery-ui.min.js" type="text/javascript"></script>
     <script src="js/accounts.js" type="text/javascript"></script>
 

resources/twig/bills/show.twig

@@ -110,9 +110,10 @@
     <script type="text/javascript">
         var billID = {{ bill.id }};
     </script>
+    {% if Config.get('firefly.chart') == 'google' %}
         <script type="text/javascript" src="https://www.google.com/jsapi"></script>
-    <script type="text/javascript" src="js/gcharts.options.js"></script>
         <script type="text/javascript" src="js/gcharts.js"></script>
+    {% endif %}
 
     <script type="text/javascript" src="js/bills.js"></script>
 {% endblock %}

resources/twig/budgets/show.twig

@@ -107,9 +107,10 @@
     </script>
 
     <!-- load the libraries and scripts necessary for Google Charts: -->
+    {% if Config.get('firefly.chart') == 'google' %}
         <script type="text/javascript" src="https://www.google.com/jsapi"></script>
-    <script type="text/javascript" src="js/gcharts.options.js"></script>
         <script type="text/javascript" src="js/gcharts.js"></script>
+    {% endif %}
     <script type="text/javascript" src="js/budgets.js"></script>
 
 {% endblock %}

resources/twig/categories/index.twig

@@ -35,9 +35,10 @@
 {% endblock %}
 
 {% block scripts %}
+    {% if Config.get('firefly.chart') == 'google' %}
         <script type="text/javascript" src="https://www.google.com/jsapi"></script>
-    <script type="text/javascript" src="js/gcharts.options.js"></script>
         <script type="text/javascript" src="js/gcharts.js"></script>
+    {% endif %}
     <script type="text/javascript" src="js/bootstrap-sortable.js"></script>
     <script type="text/javascript" src="js/categories.js"></script>
 {% endblock %}

resources/twig/categories/show.twig

@@ -47,9 +47,10 @@
         var categoryID = {{ category.id }};
     </script>
     <!-- load the libraries and scripts necessary for Google Charts: -->
+    {% if Config.get('firefly.chart') == 'google' %}
         <script type="text/javascript" src="https://www.google.com/jsapi"></script>
-    <script type="text/javascript" src="js/gcharts.options.js"></script>
         <script type="text/javascript" src="js/gcharts.js"></script>
+    {% endif %}
     <script type="text/javascript" src="js/categories.js"></script>
 
 {% endblock %}

resources/twig/index.twig

@@ -220,8 +220,11 @@
 {% endblock %}
 {% block scripts %}
     <!-- load the libraries and scripts necessary for Google Charts: -->
+    {% if Config.get('firefly.chart') == 'google' %}
         <script type="text/javascript" src="https://www.google.com/jsapi"></script>
-    <script type="text/javascript" src="js/gcharts.options.js"></script>
         <script type="text/javascript" src="js/gcharts.js"></script>
+        {% else  %}
+        <!-- no google-->
+    {% endif %}
     <script type="text/javascript" src="js/index.js"></script>
 {% endblock %}

resources/twig/piggy-banks/show.twig

@@ -93,8 +93,9 @@
     </script>
 
     <!-- load the libraries and scripts necessary for Google Charts: -->
+    {% if Config.get('firefly.chart') == 'google' %}
         <script type="text/javascript" src="https://www.google.com/jsapi"></script>
-    <script type="text/javascript" src="js/gcharts.options.js"></script>
         <script type="text/javascript" src="js/gcharts.js"></script>
+    {% endif %}
     <script type="text/javascript" src="js/piggy-banks.js"></script>
 {% endblock %}

resources/twig/reports/month.twig

@@ -68,9 +68,10 @@
     <script type="text/javascript" src="js/bootstrap-sortable.js"></script>
 
     <!-- load the libraries and scripts necessary for Google Charts: -->
+    {% if Config.get('firefly.chart') == 'google' %}
         <script type="text/javascript" src="https://www.google.com/jsapi"></script>
-    <script type="text/javascript" src="js/gcharts.options.js"></script>
         <script type="text/javascript" src="js/gcharts.js"></script>
+    {% endif %}
 
     <script type="text/javascript">
         var year = {{ start.year }};

resources/twig/reports/year.twig

@@ -70,9 +70,10 @@
 {% endblock %}
 {% block scripts %}
     <!-- load the libraries and scripts necessary for Google Charts: -->
+    {% if Config.get('firefly.chart') == 'google' %}
         <script type="text/javascript" src="https://www.google.com/jsapi"></script>
-    <script type="text/javascript" src="js/gcharts.options.js"></script>
         <script type="text/javascript" src="js/gcharts.js"></script>
+    {% endif %}
 
     <script type="text/javascript">
         var year = '{{start.year}}';