diff --git a/app/controllers/GoogleChartController.php b/app/controllers/GoogleChartController.php
index 57f1a49812..4c72298b1c 100644
--- a/app/controllers/GoogleChartController.php
+++ b/app/controllers/GoogleChartController.php
@@ -231,8 +231,7 @@ class GoogleChartController extends BaseController
         /** @var \TransactionJournal $journal */
         foreach ($journals as $journal) {
             if ($journal->transactionType->type == 'Withdrawal') {
-                $amount   = floatval($journal->transactions[1]->amount);
-                $amount   = $amount < 0 ? $amount * -1 : $amount;
+                $amount   = $journal->getAmount();
                 $category = $journal->categories()->first();
                 if (!is_null($category)) {
                     if (isset($data[$category->name])) {
@@ -321,8 +320,7 @@ class GoogleChartController extends BaseController
                         $unpaid['items'][] = $entry->name;
                         $unpaid['amount'] += (($entry->amount_max + $entry->amount_min) / 2);
                     } else {
-                        $amount          = floatval($journal->transactions[0]->amount);
-                        $amount          = $amount < 0 ? $amount * -1 : $amount;
+                        $amount          = $journal->getAmount();
                         $paid['items'][] = $journal->description;
                         $paid['amount'] += $amount;
                     }
diff --git a/app/views/layouts/default.blade.php b/app/views/layouts/default.blade.php
index 76b2c54814..b63fc91baf 100644
--- a/app/views/layouts/default.blade.php
+++ b/app/views/layouts/default.blade.php
@@ -17,6 +17,7 @@
     {{HTML::style('assets/stylesheets/metisMenu/metisMenu.min.css')}}
     {{HTML::style('assets/stylesheets/sbadmin/sb.css')}}
     {{HTML::style('assets/stylesheets/fa/css/font-awesome.min.css')}}
+    <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
     @yield('styles')
 
     <!--[if lt IE 9]>
diff --git a/public/assets/javascript/firefly/gcharts.js b/public/assets/javascript/firefly/gcharts.js
index 32c748b0ac..367b017e9c 100644
--- a/public/assets/javascript/firefly/gcharts.js
+++ b/public/assets/javascript/firefly/gcharts.js
@@ -1,4 +1,4 @@
-google.load('visualization', '1.1', {'packages': ['corechart', 'sankey', 'table']});
+google.load('visualization', '1.1', {'packages': ['corechart', 'bar','sankey', 'table']});
 
 function googleLineChart(URL, container) {
     $.getJSON(URL).success(function (data) {
@@ -48,7 +48,7 @@ function googleBarChart(URL, container) {
         /*
          Create a new google charts object.
          */
-        var chart = new google.visualization.BarChart(document.getElementById(container));
+        var chart = new google.charts.Bar(document.getElementById(container));
 
         /*
          Draw it:
@@ -78,8 +78,7 @@ function googleColumnChart(URL, container) {
         /*
          Create a new google charts object.
          */
-        var chart = new google.visualization.ColumnChart(document.getElementById(container));
-
+        var chart = new google.charts.Bar(document.getElementById(container));
         /*
          Draw it:
          */
diff --git a/public/assets/javascript/firefly/gcharts.options.js b/public/assets/javascript/firefly/gcharts.options.js
index 7cc923c261..c4e8341a73 100644
--- a/public/assets/javascript/firefly/gcharts.options.js
+++ b/public/assets/javascript/firefly/gcharts.options.js
@@ -12,13 +12,32 @@ var defaultLineChartOptions = {
         height: '80%'
     },
     height: 400,
-    vAxis: {format: '\u20AC #'}
+    vAxis: {format: '\u20AC #'},
+    colors: ["#4285f4", "#db4437", "#f4b400", "#0f9d58", "#ab47bc", "#00acc1", "#ff7043", "#9e9d24", "#5c6bc0", "#f06292", "#00796b", "#c2185b"],
+    hAxis: {
+        textStyle: {
+            color: '#838383',
+            fontName: 'Roboto',
+            fontSize: '12'
+        },
+        gridlines: {
+            color: 'transparent'
+        }
+    },
+    vAxis: {
+        textStyle: {
+            color: '#838383',
+            fontName: 'Roboto',
+            fontSize: '12'
+        }
+    }
 
 
 };
 
 var defaultBarChartOptions = {
     height: 400,
+    bars: 'horizontal',
     hAxis: {format: '\u20AC #'},
     chartArea: {
         left: 75,
@@ -29,7 +48,7 @@ var defaultBarChartOptions = {
 
     legend: {
         position: 'none'
-    }
+    },
 };
 
 var defaultColumnChartOptions = {
@@ -43,7 +62,7 @@ var defaultColumnChartOptions = {
     vAxis: {format: '\u20AC #'},
     legend: {
         position: 'none'
-    }
+    },
 };
 
 var defaultPieChartOptions = {
@@ -56,7 +75,8 @@ var defaultPieChartOptions = {
     height: 200,
     legend: {
         position: 'none'
-    }
+    },
+    colors: ["#4285f4", "#db4437", "#f4b400", "#0f9d58", "#ab47bc", "#00acc1", "#ff7043", "#9e9d24", "#5c6bc0", "#f06292", "#00796b", "#c2185b"]
 };
 
 var defaultSankeyChartOptions = {