diff --git a/src/js/client.js b/src/js/client.js
index d63ef52d8..5ebc083e5 100644
--- a/src/js/client.js
+++ b/src/js/client.js
@@ -543,6 +543,10 @@ angular.module('Application').service('Client', ['$http', '$interval', '$timeout
         return this._installedApps;
     };
 
+    Client.prototype.getInstalledAppsByAppId = function () {
+        return this._installedAppsById;
+    };
+
     Client.prototype.getAppTags = function () {
         return this._appTags;
     };
@@ -1806,7 +1810,16 @@ angular.module('Application').service('Client', ['$http', '$interval', '$timeout
         });
     };
 
-    Client.prototype.graphs = function (targets, from, options, callback) {
+    Client.prototype.getSystemGraphs = function (fromMinutes, callback) {
+        get('/api/v1/cloudron/graphs', { params: { fromMinutes: fromMinutes } }, function (error, data, status) {
+            if (error) return callback(error);
+            if (status !== 200) return callback(new ClientError(status, data));
+
+            callback(null, data);
+        });
+    };
+
+    Client.prototype.systemGraphs = function (targets, from, options, callback) {
         // if we have a lot of apps, targets can be very large. node will just disconnect since it exceeds header size
         var size = 10, chunks = [];
         for (var i = 0; i < targets.length; i += size) {
diff --git a/src/views/system.js b/src/views/system.js
index 5c3a62e0e..1fdb3dd47 100644
--- a/src/views/system.js
+++ b/src/views/system.js
@@ -82,7 +82,7 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
                     diskName = diskName.replace(/\/|\./g, '_');
 
                     // use collectd instead of df data so the timeframe matches with the du data
-                    Client.graphs([
+                    Client.getSystemGraphs([
                         'absolute(collectd.localhost.df-' + diskName + '.df_complex-free)',
                         'absolute(collectd.localhost.df-' + diskName + '.df_complex-reserved)', // reserved for root (default: 5%) tune2fs -l/m
                         'absolute(collectd.localhost.df-' + diskName + '.df_complex-used)'
@@ -163,7 +163,7 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
         },
 
         show: function () {
-            var apps = Client.getInstalledApps();
+            var appsById = Client.getInstalledAppsByAppId();
 
             // both in minutes
             var timePeriod = $scope.graphs.period * 60;
@@ -191,20 +191,19 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
                     data: datapoints
                 }];
 
-                if (Array.isArray(appsData)) {
-                    appsData.forEach(function (data, index) {
-                        if (!data.datapoints.some(function (p) { return p[0] > 1024*1024*1024; })) return;
+                Object.keys(appsData).forEach(function (appId) {
+                    var data = appsData[appId].memory;
+                    if (!data.datapoints.some(function (p) { return p[0] > 1024*1024*1024; })) return;
 
-                        datasets.push({
-                            label: apps[index].fqdn,
-                            fill: false,
-                            borderColor: getRandomColor(),
-                            borderWidth: 1,
-                            radius: 0,
-                            data: data.datapoints.map(function (d) { return parseInt((d[0] / valueDivider).toFixed(2)); })
-                        });
+                    datasets.push({
+                        label: appsById[appId].fqdn,
+                        fill: false,
+                        borderColor: getRandomColor(),
+                        borderWidth: 1,
+                        radius: 0,
+                        data: data.datapoints.map(function (d) { return parseInt((d[0] / valueDivider).toFixed(2)); })
                     });
-                }
+                });
 
                 var chartData = {
                     labels: labels,
@@ -242,19 +241,11 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
                 $scope.graphs[chartPropertyName] = new Chart(ctx, { type: 'line', data: chartData, options: options });
             }
 
-            var cpuQuery = 'summarize(sum(collectd.localhost.aggregation-cpu-average.cpu-system, collectd.localhost.aggregation-cpu-average.cpu-user), "' + timeBucketSize + 'min", "avg")';
-            var systemMemoryQuery = 'summarize(sum(collectd.localhost.memory.memory-used, collectd.localhost.swap.swap-used), "' + timeBucketSize + 'min", "avg")';
-
-            var appQueries = [];
-            apps.forEach(function (app) {
-                appQueries.push('summarize(collectd.localhost.table-' + app.id + '-memory.gauge-rss, "' + timeBucketSize + 'min", "avg")');
-            });
-
-            Client.graphs([ cpuQuery, systemMemoryQuery ].concat(appQueries), '-' + timePeriod + 'min', {}, function (error, result) {
+            Client.getSystemGraphs(timePeriod, function (error, result) {
                 if (error) return console.error(error);
 
-                fillGraph('#graphsCPUChart', result[0], null, 'CPU Usage', 'cpuChart', 100, 1);
-                fillGraph('#graphsSystemMemoryChart', result[1], result.slice(2), 'Memory', 'memoryChart', Number.parseInt(($scope.memory.memory + $scope.memory.swap) / 1024 / 1024), 1024 * 1024);
+                fillGraph('#graphsCPUChart', result.cpu, [], 'CPU Usage', 'cpuChart', 100, 1);
+                fillGraph('#graphsSystemMemoryChart', result.memory, result.apps, 'Memory', 'memoryChart', Number.parseInt(($scope.memory.memory + $scope.memory.swap) / 1024 / 1024), 1024 * 1024);
             });
         }
     };