--- a/client/src/assets/application.scss	Mon Mar 18 15:34:37 2019 +0100
+++ b/client/src/assets/application.scss	Mon Mar 18 15:43:03 2019 +0100
@@ -181,11 +181,16 @@
   }
 }
 
-.form-control-sm.small {
+select.form-control-sm.small {
   padding: 0.25rem 0.1rem;
   font-size: 80%;
 }
 
+input.form-control-sm.small {
+  padding: 0.25rem 0.2rem;
+  font-size: 80%;
+}
+
 .empty {
   margin-right: 1.25rem;
 }

--- a/client/src/components/gauge/Gauges.vue	Mon Mar 18 15:34:37 2019 +0100
+++ b/client/src/components/gauge/Gauges.vue	Mon Mar 18 15:43:03 2019 +0100
@@ -36,18 +36,26 @@
         </select>
         <div v-if="selectedGaugeISRS" class="mt-2">
           <hr class="mb-1" />
-          <small class="text-muted">
-            <translate>Time period</translate>:
-          </small>
-          <select
-            v-model="waterlevelsTimePeriod"
-            class="form-control form-control-sm mb-2"
-          >
-            <option value="day">last day</option>
-            <option value="week">last week</option>
-            <option value="month">last month</option>
-            <option value="year">last year</option>
-          </select>
+          <div class="row no-gutters mb-2">
+            <div class="col-6 pr-1">
+              <small class="text-muted"><translate>From</translate>:</small>
+              <input
+                type="date"
+                class="form-control form-control-sm small"
+                :value="dateFrom && dateFrom.toISOString().split('T')[0]"
+                @input="dateFrom = $event.target.valueAsDate"
+              />
+            </div>
+            <div class="col-6 pl-1">
+              <small class="text-muted"><translate>To</translate>:</small>
+              <input
+                type="date"
+                class="form-control form-control-sm small"
+                :value="dateTo && dateTo.toISOString().split('T')[0]"
+                @input="dateTo = $event.target.valueAsDate"
+              />
+            </div>
+          </div>
           <button
             @click="showWaterlevelDiagram()"
             class="btn btn-sm btn-info d-block w-100"
@@ -91,12 +99,14 @@
  * Markus Kottländer <markus.kottlaender@intevation.de>
  */
 import { mapState, mapGetters } from "vuex";
+import { displayError } from "@/lib/errors.js";
 
 export default {
   data() {
     return {
       loading: false,
-      waterlevelsTimePeriod: "day"
+      dateFrom: new Date(),
+      dateTo: new Date()
     };
   },
   computed: {
@@ -164,8 +174,18 @@
       this.loading = true;
       this.$store.commit("application/showSplitscreen", true);
       this.$store
-        .dispatch("gauges/loadWaterlevels", this.waterlevelsTimePeriod)
-        .then(() => {
+        .dispatch("gauges/loadWaterlevels", {
+          from: this.dateFrom,
+          to: this.toDate
+        })
+        .catch(error => {
+          const { status, data } = error.response;
+          displayError({
+            title: "Backend Error",
+            message: `${status}: ${data.message || data}`
+          });
+        })
+        .finally(() => {
           this.$store.commit("application/splitscreenLoading", false);
           this.loading = false;
         });
@@ -179,6 +199,7 @@
     }
   },
   mounted() {
+    this.dateFrom.setDate(this.dateFrom.getDate() - 30);
     this.$store.dispatch("gauges/loadGauges");
   }
 };

--- a/client/src/components/gauge/Waterlevel.vue	Mon Mar 18 15:34:37 2019 +0100
+++ b/client/src/components/gauge/Waterlevel.vue	Mon Mar 18 15:43:03 2019 +0100
@@ -1,5 +1,11 @@
 <template>
-  <div class="flex-fill diagram-container"></div>
+  <div
+    class="d-flex flex-fill justify-content-center align-items-center diagram-container"
+  >
+    <div v-if="!waterlevels.length">
+      <translate>No data available.</translate>
+    </div>
+  </div>
 </template>
 
 <style lang="sass" scoped>
@@ -105,11 +111,11 @@
   },
   methods: {
     drawDiagram() {
-      if (!this.selectedGauge || !this.waterlevels.length) return;
-
       // remove old diagram
       d3.select(".diagram-container svg").remove();
 
+      if (!this.selectedGauge || !this.waterlevels.length) return;
+
       // get HDC/LDC/MW of the gauge
       let refWaterLevels = JSON.parse(
         this.selectedGauge.properties.reference_water_levels

--- 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);
+          });
       });
     }
   }