diff --git a/app/controllers/GoogleChartController.php b/app/controllers/GoogleChartController.php
index b72d791379..daeedcfddd 100644
--- a/app/controllers/GoogleChartController.php
+++ b/app/controllers/GoogleChartController.php
@@ -200,6 +200,47 @@ class GoogleChartController extends BaseController
         return Response::json($chart->getData());
     }
 
+    public function budgetsAndSpending(Budget $budget, $year) {
+        try {
+            $start = new Carbon('01-01-' . $year);
+        } catch (Exception $e) {
+            App::abort(500);
+        }
+
+        /** @var \FireflyIII\Database\Budget $bdt */
+        $bdt     = App::make('FireflyIII\Database\Budget');
+
+        /** @var \Grumpydictator\Gchart\GChart $chart */
+        $chart = App::make('gchart');
+        $chart->addColumn('Month', 'date');
+        $chart->addColumn('Budgeted', 'number');
+        $chart->addColumn('Spent', 'number');
+
+        $end = clone $start;
+        $end->endOfYear();
+        while($start <= $end) {
+
+            $spent = $bdt->spentInMonth($budget, $start);
+            $repetition = $bdt->repetitionOnStartingOnDate($budget, $start);
+            if($repetition) {
+                $budgeted = floatval($repetition->amount);
+            } else {
+                $budgeted = 0;
+            }
+
+            $chart->addRow(clone $start, $budgeted, $spent);
+
+            $start->addMonth();
+        }
+
+
+
+        $chart->generate();
+        return Response::json($chart->getData());
+
+
+    }
+
     /**
      * @return \Illuminate\Http\JsonResponse
      */
diff --git a/app/routes.php b/app/routes.php
index ff19a498ee..4d85b37703 100644
--- a/app/routes.php
+++ b/app/routes.php
@@ -169,6 +169,7 @@ Route::group(
         Route::get('/chart/reports/income-expenses/{year}', ['uses' => 'GoogleChartController@yearInExp']);
         Route::get('/chart/reports/income-expenses-sum/{year}', ['uses' => 'GoogleChartController@yearInExpSum']);
         Route::get('/chart/reports/budgets/{year}', ['uses' => 'GoogleChartController@budgetsReportChart']);
+        Route::get('/chart/budgets/{budget}/spending/{year}', ['uses' => 'GoogleChartController@budgetsAndSpending']);
 
         // google table controller
         Route::get('/table/account/{account}/transactions', ['uses' => 'GoogleTableController@transactionsByAccount']);
diff --git a/app/views/budgets/show.blade.php b/app/views/budgets/show.blade.php
index 71d6418e42..2cdc0f3e14 100644
--- a/app/views/budgets/show.blade.php
+++ b/app/views/budgets/show.blade.php
@@ -8,7 +8,7 @@
                 Some stuff?
             </div>
             <div class="panel-body">
-                Some stuff?
+                <div id="budgetOverview"></div>
             </div>
         </div>
 
@@ -76,7 +76,11 @@
     var budgetID = {{$budget->id}};
     @if(!is_null($repetition))
         var repetitionID = {{$repetition->id}};
+        var year = {{$repetition->startdate->format('Y')}};
+    @else
+        var year = {{Session::get('start')->format('Y')}};
     @endif
+
 </script>
 
 <!-- load the libraries and scripts necessary for Google Charts: -->
diff --git a/public/assets/javascript/firefly/budgets.js b/public/assets/javascript/firefly/budgets.js
index 881948aa16..a6de8b79cc 100644
--- a/public/assets/javascript/firefly/budgets.js
+++ b/public/assets/javascript/firefly/budgets.js
@@ -10,6 +10,8 @@ $(function () {
     if (typeof(googleTable) == 'function') {
         if (typeof budgetID != 'undefined' && typeof repetitionID == 'undefined') {
             googleTable('table/budget/' + budgetID + '/0/transactions', 'transactions');
+            googleColumnChart('chart/budgets/'+budgetID+'/spending/2014','budgetOverview');
+
         } else if (typeof budgetID != 'undefined' && typeof repetitionID != 'undefined') {
             googleTable('table/budget/' + budgetID + '/' + repetitionID + '/transactions', 'transactions');
         }