Expand some layouts to accept chartJS charts.

public/js/charts.js

@@ -1,33 +1,174 @@
+/* globals $, Chart, currencySymbol */
+
+/*
+ Make some colours:
+ */
+var colourSet = [
+    [53, 124, 165],
+    [0, 141, 76],
+    [219, 139, 11],
+    [202, 25, 90]
+];
+
+var fillColors = [];
+var strokePointHighColors = [];
 
 
+for (var i = 0; i < colourSet.length; i++) {
+    fillColors.push("rgba(" + colourSet[i][0] + ", " + colourSet[i][1] + ", " + colourSet[i][2] + ", 0.2)");
+    strokePointHighColors.push("rgba(" + colourSet[i][0] + ", " + colourSet[i][1] + ", " + colourSet[i][2] + ", 0.9)");
+}
 
+/*
+ Set default options:
+ */
+var defaultAreaOptions = {
+    scaleShowGridLines: false,
+    pointDotRadius: 2,
+    datasetStrokeWidth: 1,
+    pointHitDetectionRadius: 5,
+    datasetFill: true,
+    scaleFontSize: 10,
+    responsive: true,
+    scaleLabel:           "<%= '" + currencyCode + " ' + Number(value).toFixed(2).replace('.', ',') %>",
+    tooltipFillColor: "rgba(0,0,0,0.5)",
+    multiTooltipTemplate: "<%=datasetLabel%>: <%= '" + currencyCode + " ' + Number(value).toFixed(2).replace('.', ',') %>"
+};
 
+var defaultLineOptions = defaultAreaOptions;
+defaultLineOptions.datasetFill = false;
 
+/**
+ * Function to draw a line chart:
+ * @param URL
+ * @param container
+ * @param options
+ */
 function lineChart(URL, container, options) {
     "use strict";
-    console.log('no impl for lineChart');
+    options = options || defaultLineOptions;
+
+    $.getJSON(URL).success(function (data) {
+        var ctx = document.getElementById(container).getContext("2d");
+        var newData = {};
+        newData.datasets = [];
+
+        for (var i = 0; i < data.count; i++) {
+            newData.labels = data.labels;
+            var dataset = data.datasets[i];
+            dataset.fillColor = fillColors[i];
+            dataset.strokeColor = strokePointHighColors[i];
+            dataset.pointColor = strokePointHighColors[i];
+            dataset.pointStrokeColor = "#fff";
+            dataset.pointHighlightFill = "#fff";
+            dataset.pointHighlightStroke = strokePointHighColors[i];
+            newData.datasets.push(dataset);
+        }
+        var myAreaChart = new Chart(ctx).Line(newData, options);
+
+    }).fail(function () {
+        $('#' + container).addClass('google-chart-error');
+    });
+    console.log('URL for line chart : ' + URL);
 }
 
+/**
+ * Function to draw an area chart:
+ *
+ * @param URL
+ * @param container
+ * @param options
+ */
 function areaChart(URL, container, options) {
     "use strict";
-    console.log('no impl for areaChart');
+    options = options || defaultAreaOptions;
+
+    $.getJSON(URL).success(function (data) {
+        var ctx = document.getElementById(container).getContext("2d");
+        var newData = {};
+        newData.datasets = [];
+
+        for (var i = 0; i < data.count; i++) {
+            newData.labels = data.labels;
+            var dataset = data.datasets[i];
+            dataset.fillColor = fillColors[i];
+            dataset.strokeColor = strokePointHighColors[i];
+            dataset.pointColor = strokePointHighColors[i];
+            dataset.pointStrokeColor = "#fff";
+            dataset.pointHighlightFill = "#fff";
+            dataset.pointHighlightStroke = strokePointHighColors[i];
+            newData.datasets.push(dataset);
+        }
+        new Chart(ctx).Line(newData, options);
+
+    }).fail(function () {
+        $('#' + container).addClass('google-chart-error');
+    });
+
+    console.log('URL for area chart: ' + URL);
 }
 
+/**
+ *
+ * @param URL
+ * @param container
+ * @param options
+ */
 function columnChart(URL, container, options) {
     "use strict";
-    console.log('no impl for columnChart');
+
+    $.getJSON(URL).success(function (data) {
+        var ctx = document.getElementById(container).getContext("2d");
+        var newData = {};
+        newData.datasets = [];
+
+        for (var i = 0; i < data.count; i++) {
+            newData.labels = data.labels;
+            var dataset = data.datasets[i];
+            dataset.fillColor = fillColors[i];
+            dataset.strokeColor = strokePointHighColors[i];
+            dataset.pointColor = strokePointHighColors[i];
+            dataset.pointStrokeColor = "#fff";
+            dataset.pointHighlightFill = "#fff";
+            dataset.pointHighlightStroke = strokePointHighColors[i];
+            newData.datasets.push(dataset);
+        }
+        new Chart(ctx).Column(newData, options);
+
+    }).fail(function () {
+        $('#' + container).addClass('google-chart-error');
+    });
+    console.log('URL for column chart : ' + URL);
 }
 
+/**
+ *
+ * @param URL
+ * @param container
+ * @param options
+ */
 function stackedColumnChart(URL, container, options) {
     "use strict";
     console.log('no impl for stackedColumnChart');
 }
 
+/**
+ *
+ * @param URL
+ * @param container
+ * @param options
+ */
 function comboChart(URL, container, options) {
     "use strict";
     console.log('no impl for comboChart');
 }
 
+/**
+ *
+ * @param URL
+ * @param container
+ * @param options
+ */
 function pieChart(URL, container, options) {
     "use strict";
     console.log('no impl for pieChart');

public/js/index.js

@@ -15,7 +15,7 @@ function drawChart() {
     "use strict";
     areaChart('chart/account/frontpage', 'accounts-chart');
     pieChart('chart/bill/frontpage', 'bills-chart');
-    stackedColumnChart('chart/budget/frontpage', 'budgets-chart');
+    columnChart('chart/budget/frontpage', 'budgets-chart');
     columnChart('chart/category/frontpage', 'categories-chart');
 
 

public/js/reports.js

@@ -1,7 +1,13 @@
 /* globals google, expenseRestShow:true, incomeRestShow:true, year, shared, month, hideTheRest, showTheRest, showTheRestExpense, hideTheRestExpense, columnChart, lineChart, stackedColumnChart */
-if (typeof(google) !== 'undefined') {
+
-    google.setOnLoadCallback(drawChart);
+$(function () {
-}
+    "use strict";
+    if (typeof(google) !== 'undefined') {
+        google.setOnLoadCallback(drawChart);
+    } else {
+        drawChart();
+    }
+});
 
 
 function drawChart() {
@@ -16,7 +22,6 @@ function drawChart() {
 }
 
 
-
 function openModal(e) {
     "use strict";
     var target = $(e.target).parent();

resources/twig/accounts/index.twig

@@ -55,6 +55,10 @@
         <script type="text/javascript" src="https://www.google.com/jsapi"></script>
         <script type="text/javascript" src="js/gcharts.js"></script>
     {% endif %}
+    {% if Config.get('firefly.chart') == 'chartjs' %}
+        <script type="text/javascript" src="js/Chart.min.js"></script>
+        <script type="text/javascript" src="js/charts.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

@@ -24,7 +24,12 @@
                     </div>
                 </div>
                 <div class="box-body">
+                    {% if Config.get('firefly.chart') == 'google' %}
                     <div id="overview-chart"></div>
+                    {% endif %}
+                    {% if Config.get('firefly.chart') == 'chartjs' %}
+                        <canvas id="overview-chart" style="width:100%;height:400px;"></canvas>
+                    {% endif %}
                 </div>
             </div>
         </div>
@@ -57,6 +62,10 @@
         <script type="text/javascript" src="https://www.google.com/jsapi"></script>
         <script type="text/javascript" src="js/gcharts.js"></script>
     {% endif %}
+    {% if Config.get('firefly.chart') == 'chartjs' %}
+        <script type="text/javascript" src="js/Chart.min.js"></script>
+        <script type="text/javascript" src="js/charts.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

@@ -114,6 +114,10 @@
         <script type="text/javascript" src="https://www.google.com/jsapi"></script>
         <script type="text/javascript" src="js/gcharts.js"></script>
     {% endif %}
+    {% if Config.get('firefly.chart') == 'chartjs' %}
+        <script type="text/javascript" src="js/Chart.min.js"></script>
+        <script type="text/javascript" src="js/charts.js"></script>
+    {% endif %}
 
     <script type="text/javascript" src="js/bills.js"></script>
 {% endblock %}

resources/twig/budgets/show.twig

@@ -111,6 +111,10 @@
         <script type="text/javascript" src="https://www.google.com/jsapi"></script>
         <script type="text/javascript" src="js/gcharts.js"></script>
     {% endif %}
+    {% if Config.get('firefly.chart') == 'chartjs' %}
+        <script type="text/javascript" src="js/Chart.min.js"></script>
+        <script type="text/javascript" src="js/charts.js"></script>
+    {% endif %}
     <script type="text/javascript" src="js/budgets.js"></script>
 
 {% endblock %}

resources/twig/categories/index.twig

@@ -39,6 +39,10 @@
         <script type="text/javascript" src="https://www.google.com/jsapi"></script>
         <script type="text/javascript" src="js/gcharts.js"></script>
     {% endif %}
+    {% if Config.get('firefly.chart') == 'chartjs' %}
+        <script type="text/javascript" src="js/Chart.min.js"></script>
+        <script type="text/javascript" src="js/charts.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

@@ -51,6 +51,10 @@
         <script type="text/javascript" src="https://www.google.com/jsapi"></script>
         <script type="text/javascript" src="js/gcharts.js"></script>
     {% endif %}
+    {% if Config.get('firefly.chart') == 'chartjs' %}
+        <script type="text/javascript" src="js/Chart.min.js"></script>
+        <script type="text/javascript" src="js/charts.js"></script>
+    {% endif %}
     <script type="text/javascript" src="js/categories.js"></script>
 
 {% endblock %}

resources/twig/index.twig

@@ -6,6 +6,8 @@
 {% block content %}
 
 
+
+
     {% include 'partials/boxes.twig' %}
 
     <div class="row">
@@ -20,7 +22,12 @@
                     </div>
                 </div>
                 <div class="box-body">
-                    <div id="accounts-chart"></div>
+                    {% if Config.get('firefly.chart') == 'google' %}
+                        <div id="accounts-chart"></div>
+                    {% endif %}
+                    {% if Config.get('firefly.chart') == 'chartjs' %}
+                        <canvas id="accounts-chart" style="width:100%;height:400px;"></canvas>
+                    {% endif %}
                 </div>
             </div>
 
@@ -34,7 +41,12 @@
                     </div>
                 </div>
                 <div class="box-body">
-                    <div id="budgets-chart"></div>
+                    {% if Config.get('firefly.chart') == 'google' %}
+                        <div id="budgets-chart"></div>
+                    {% endif %}
+                    {% if Config.get('firefly.chart') == 'chartjs' %}
+                        <canvas id="accounts-chart" style="width:100%;height:400px;"></canvas>
+                    {% endif %}
                 </div>
             </div>
             <!-- CATEGORIES -->
@@ -230,3 +242,5 @@
     {% endif %}
     <script type="text/javascript" src="js/index.js"></script>
 {% endblock %}
+{% block styles %}
+{% endblock %}

resources/twig/piggy-banks/show.twig

@@ -97,5 +97,9 @@
         <script type="text/javascript" src="https://www.google.com/jsapi"></script>
         <script type="text/javascript" src="js/gcharts.js"></script>
     {% endif %}
+    {% if Config.get('firefly.chart') == 'chartjs' %}
+        <script type="text/javascript" src="js/Chart.min.js"></script>
+        <script type="text/javascript" src="js/charts.js"></script>
+    {% endif %}
     <script type="text/javascript" src="js/piggy-banks.js"></script>
 {% endblock %}

resources/twig/reports/month.twig

@@ -13,7 +13,12 @@
                     <h3 class="box-title">{{ 'accountBalances'|_ }}</h3>
                 </div>
                 <div class="box-body">
-                    <div id="account-balances-chart"></div>
+                    {% if Config.get('firefly.chart') == 'google' %}
+                        <div id="account-balances-chart"></div>
+                    {% endif %}
+                    {% if Config.get('firefly.chart') == 'chartjs' %}
+                        <canvas id="account-balances-chart" style="width:100%;height:400px;"></canvas>
+                    {% endif %}
                 </div>
             </div>
         </div>
@@ -72,6 +77,10 @@
         <script type="text/javascript" src="https://www.google.com/jsapi"></script>
         <script type="text/javascript" src="js/gcharts.js"></script>
     {% endif %}
+    {% if Config.get('firefly.chart') == 'chartjs' %}
+        <script type="text/javascript" src="js/Chart.min.js"></script>
+        <script type="text/javascript" src="js/charts.js"></script>
+    {% endif %}
 
     <script type="text/javascript">
         var year = {{ start.year }};

resources/twig/reports/year.twig

@@ -74,6 +74,10 @@
         <script type="text/javascript" src="https://www.google.com/jsapi"></script>
         <script type="text/javascript" src="js/gcharts.js"></script>
     {% endif %}
+    {% if Config.get('firefly.chart') == 'chartjs' %}
+        <script type="text/javascript" src="js/Chart.min.js"></script>
+        <script type="text/javascript" src="js/charts.js"></script>
+    {% endif %}
 
     <script type="text/javascript">
         var year = '{{start.year}}';