diff --git a/app/Http/Controllers/BudgetController.php b/app/Http/Controllers/BudgetController.php
index 966df042ab..a36079cd12 100644
--- a/app/Http/Controllers/BudgetController.php
+++ b/app/Http/Controllers/BudgetController.php
@@ -155,12 +155,11 @@ class BudgetController extends Controller
 
         $dateAsString      = Session::get('start', Carbon::now()->startOfMonth())->format('FY');
         $budgetIncomeTotal = Preferences::get('budgetIncomeTotal' . $dateAsString, 1000)->data;
-        $spentPercentage   = ($spent > $budgeted) ? ceil($budgeted / $spent * 100) : ceil($spent / $budgeted * 100);
         $budgetMaximum     = Preferences::get('budgetMaximum', 1000)->data;
         $defaultCurrency   = Amount::getDefaultCurrency();
 
         return view(
-            'budgets.index', compact('budgetMaximum', 'budgetIncomeTotal', 'defaultCurrency', 'inactive', 'budgets', 'spent', 'spentPercentage', 'budgeted')
+            'budgets.index', compact('budgetMaximum', 'budgetIncomeTotal', 'defaultCurrency', 'inactive', 'budgets', 'spent', 'budgeted')
         );
     }
 
diff --git a/public/js/budgets.js b/public/js/budgets.js
index ccac9aac9e..3493c81fc0 100644
--- a/public/js/budgets.js
+++ b/public/js/budgets.js
@@ -1,15 +1,20 @@
-/* globals $, budgeted, currencySymbol, overspent, budgetIncomeTotal ,budgetedMuch, budgetedPercentage, token, budgetID, repetitionID, spent, budgeted, overspent, spentPercentage */
+/* globals $, budgeted:false, currencySymbol, budgetIncomeTotal ,budgetedMuch, budgetedPercentage, token, budgetID, repetitionID, spent, budgeted*/
 
 function drawSpentBar() {
     "use strict";
 
+    var overspent = spent > budgeted;
+    var pct;
+
     if (overspent) {
         // draw overspent bar
-        $('.spentBar .progress-bar-warning').css('width', spentPercentage + '%');
-        $('.spentBar .progress-bar-danger').css('width', (100 - spentPercentage) + '%');
+        pct = (budgeted / spent) * 100;
+        $('.spentBar .progress-bar-warning').css('width', pct + '%');
+        $('.spentBar .progress-bar-danger').css('width', (100 - pct) + '%');
     } else {
         // draw normal bar:
-        $('.spentBar .progress-bar-info').css('width', spentPercentage + '%');
+        pct = (spent / budgeted) * 100;
+        $('.spentBar .progress-bar-info').css('width', pct + '%');
     }
 }
 
@@ -23,13 +28,11 @@ function drawBudgetedBar() {
     if (budgetedMuch) {
         // budgeted too much.
         pct = (budgetIncomeTotal / budgeted) * 100;
-        console.log('Budgeted TOO much. Pct is ' + pct)
         $('.budgetedBar .progress-bar-warning').css('width', pct + '%');
         $('.budgetedBar .progress-bar-danger').css('width', (100 - pct) + '%');
         $('.budgetedBar .progress-bar-info').css('width', 0);
     } else {
         pct = (budgeted / budgetIncomeTotal) * 100;
-        console.log('Not budgeted too much. Pct is ' + pct)
         $('.budgetedBar .progress-bar-warning').css('width', 0);
         $('.budgetedBar .progress-bar-danger').css('width', 0);
         $('.budgetedBar .progress-bar-info').css('width', pct + '%');
diff --git a/resources/twig/budgets/index.twig b/resources/twig/budgets/index.twig
index 380fc5cbdc..5601d04dc3 100644
--- a/resources/twig/budgets/index.twig
+++ b/resources/twig/budgets/index.twig
@@ -157,8 +157,6 @@
     <script type="text/javascript">
         // actually spent bar data:
         var spent = {{ spent }};
-        var overspent = {{ spent  }} > {{ budgeted  }};
-        var spentPercentage = {{ spentPercentage }};
         var currencySymbol = "{{ getCurrencySymbol()|raw }}";
 
         // budgeted data: