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 @@