--- a/client/src/store/gauges.js	Mon Mar 18 15:34:37 2019 +0100
+++ b/client/src/store/gauges.js	Mon Mar 18 15:43:03 2019 +0100
@@ -18,8 +18,7 @@
   return {
     gauges: [],
     selectedGaugeISRS: null,
-    waterlevels: [],
-    loading: false
+    waterlevels: []
   };
 };
 
@@ -43,9 +42,6 @@
     },
     waterlevels: (state, data) => {
       state.waterlevels = data;
-    },
-    loading: (state, loading) => {
-      state.loading = loading;
     }
   },
   actions: {
@@ -82,25 +78,44 @@
           });
       });
     },
-    loadWaterlevels({ getters, commit }, timePeriod) {
-      let waterlevels = require("@/components/gauge/waterlevels-demo.json");
+    loadWaterlevels({ getters, commit }, { from, to }) {
+      from = from || new Date();
+      to = to || new Date();
+
+      // include the last day
+      to.setDate(to.getDate() + 1);
 
-      return new Promise(resolve => {
-        if (getters.selectedGauge && timePeriod) {
-          let data = waterlevels
-            .filter(wl => wl.gauge === getters.selectedGauge.id.split(".")[1])
-            .map(wl => {
-              wl.date = new Date(wl.date);
-              return wl;
-            });
-
-          setTimeout(() => {
+      return new Promise((resolve, reject) => {
+        HTTP.get(
+          `/data/waterlevels/${
+            getters.selectedGauge.properties.isrs_code
+          }?from=${from
+            .toISOString()
+            .substr(0, 23)}&to=${to.toISOString().substr(0, 23)}`,
+          {
+            headers: { "X-Gemma-Auth": localStorage.getItem("token") }
+          }
+        )
+          .then(response => {
+            let data = response.data
+              .split("\n")
+              .filter(wl => wl)
+              .map(wl => {
+                wl = wl.split(",");
+                return {
+                  date: new Date(wl[0]),
+                  waterlevel: Number(wl[1]),
+                  predicted: wl[2] === "f" ? false : true
+                };
+              });
+            data = data.sort((a, b) => a.date - b.date);
             commit("waterlevels", data);
             resolve(data);
-          }, 2000);
-        } else {
-          commit("waterlevels", []);
-        }
+          })
+          .catch(error => {
+            commit("waterlevels", []);
+            reject(error);
+          });
       });
     }
   }