From cea170359f6aea295154c7f84f058178bc52ff3a Mon Sep 17 00:00:00 2001
From: James Cole <thegrumpydictator@gmail.com>
Date: Fri, 23 Dec 2016 18:34:58 +0100
Subject: [PATCH] Budget chart.

---
 .../Chart/BudgetReportController.php          |  5 +-
 public/js/ff/charts.js                        | 48 +++++++++++++++++++
 public/js/ff/reports/budget/month.js          |  2 +-
 resources/views/reports/budget/month.twig     |  3 +-
 4 files changed, 55 insertions(+), 3 deletions(-)

diff --git a/app/Http/Controllers/Chart/BudgetReportController.php b/app/Http/Controllers/Chart/BudgetReportController.php
index 2a7be91751..ae51df4ee0 100644
--- a/app/Http/Controllers/Chart/BudgetReportController.php
+++ b/app/Http/Controllers/Chart/BudgetReportController.php
@@ -209,18 +209,21 @@ class BudgetReportController extends Controller
             $chartData[$budget->id]           = [
                 'label'   => strval(trans('firefly.spent_in_specific_budget', ['budget' => $budget->name])),
                 'type'    => 'bar',
+                'yAxisID' => 'y-axis-0',
                 'entries' => [],
             ];
             $chartData[$budget->id . '-sum']  = [
                 'label'   => strval(trans('firefly.sum_of_expenses_in_budget', ['budget' => $budget->name])),
                 'type'    => 'line',
                 'fill'    => false,
+                'yAxisID' => 'y-axis-1',
                 'entries' => [],
             ];
             $chartData[$budget->id . '-left'] = [
                 'label'   => strval(trans('firefly.left_in_budget_limit', ['budget' => $budget->name])),
-                'type'    => 'line',
+                'type'    => 'bar',
                 'fill'    => false,
+                'yAxisID' => 'y-axis-0',
                 'entries' => [],
             ];
         }
diff --git a/public/js/ff/charts.js b/public/js/ff/charts.js
index f49a5cc4a2..7180a9c131 100644
--- a/public/js/ff/charts.js
+++ b/public/js/ff/charts.js
@@ -132,6 +132,54 @@ function doubleYChart(URI, container) {
     drawAChart(URI, container, chartType, options, colorData);
 }
 
+/**
+ * Function to draw a chart with double Y Axes and non stacked columns.
+ *
+ * @param URI
+ * @param container
+ */
+function doubleYNonStackedChart(URI, container) {
+    "use strict";
+
+    var colorData = true;
+    var options = defaultChartOptions;
+    options.scales.yAxes = [
+        // y axis 0:
+        {
+            display: true,
+            ticks: {
+                callback: function (tickValue, index, ticks) {
+                    "use strict";
+                    return accounting.formatMoney(tickValue);
+
+                },
+                beginAtZero: true
+            },
+            position: "left",
+            "id": "y-axis-0"
+        },
+        // and y axis 1:
+        {
+            display: true,
+            ticks: {
+                callback: function (tickValue, index, ticks) {
+                    "use strict";
+                    return accounting.formatMoney(tickValue);
+
+                },
+                beginAtZero: true
+            },
+            position: "right",
+            "id": "y-axis-1"
+        }
+
+    ];
+    var chartType = 'bar';
+
+    drawAChart(URI, container, chartType, options, colorData);
+}
+
+
 
 /**
  *
diff --git a/public/js/ff/reports/budget/month.js b/public/js/ff/reports/budget/month.js
index 0eeb33fa93..c103e00dff 100644
--- a/public/js/ff/reports/budget/month.js
+++ b/public/js/ff/reports/budget/month.js
@@ -28,7 +28,7 @@ function drawChart() {
     "use strict";
 
     // month view:
-    stackedColumnChart(mainUri, 'in-out-chart');
+    doubleYNonStackedChart(mainUri, 'in-out-chart');
 
     // draw pie chart of income, depending on "show other transactions too":
     redrawPieChart('budgets-out-pie-chart', budgetExpenseUri);
diff --git a/resources/views/reports/budget/month.twig b/resources/views/reports/budget/month.twig
index dca1cc27b8..5336f0fd18 100644
--- a/resources/views/reports/budget/month.twig
+++ b/resources/views/reports/budget/month.twig
@@ -107,10 +107,11 @@
                     <h3 class="box-title">{{ 'income_and_expenses'|_ }}</h3>
                 </div>
                 <div class="box-body">
+                    {#
                     Here be a chart with the budget limits as well if relevant.<br>
                     amount spent vs budget limit reps<br>
                     over the entire period the amount spent would rise and the budget limit rep would be like a heart beat jumping up and down<br>
-                    needs to be two axes to work<br>
+                    needs to be two axes to work<br>#}
                     <canvas id="in-out-chart" style="margin:0 auto;" height="300"></canvas>
                 </div>
             </div>