Budget chart.

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' => [],
             ];
         }

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);
+}
+
+
 
 /**
  *

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);

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>