--- a/client/src/components/gauge/Gauges.vue	Thu Mar 21 17:04:37 2019 +0100
+++ b/client/src/components/gauge/Gauges.vue	Thu Mar 21 17:31:03 2019 +0100
@@ -68,7 +68,11 @@
             <translate>Show Waterlevels</translate>
           </button>
           <hr />
-          <button class="btn btn-sm btn-info d-block w-100 mt-2" disabled>
+          <button
+            @click="showHydrologicalConditionsDiagram()"
+            class="btn btn-sm btn-info d-block w-100 mt-2"
+            disabled
+          >
             <translate>Show Hydrological Conditions</translate>
           </button>
         </div>
@@ -149,6 +153,9 @@
       if (this.activeSplitscreenId === "gauge-waterlevel") {
         this.showWaterlevelDiagram();
       }
+      if (this.activeSplitscreenId === "gauge-hydrological-conditions") {
+        this.showHydrologicalConditionsDiagram();
+      }
     }
   },
   methods: {
@@ -212,6 +219,53 @@
           this.loading = false;
         });
     },
+    showHydrologicalConditionsDiagram() {
+      // for panning the map to the gauge on opening the diagram: needs to be
+      // set outside of the expandCallback to not always refer to the currently
+      // selectedGauge
+      let coordinates = this.selectedGauge.geometry.coordinates;
+
+      // configure splitscreen
+      let splitscreenConf = {
+        id: "gauge-hydrological-conditions",
+        component: "hydrological-conditions",
+        title:
+          this.$gettext("Hydrological Conditions") +
+          ": " +
+          this.gaugeLabel(this.selectedGauge),
+        icon: "ruler-vertical",
+        closeCallback: () => {
+          this.$store.commit("gauges/selectedGaugeISRS", null);
+          this.$store.commit("gauges/meanWaterlevels", []);
+        },
+        expandCallback: () => {
+          this.$store.commit("map/moveMap", {
+            coordinates,
+            zoom: 17,
+            preventZoomOut: true
+          });
+        }
+      };
+      this.$store.commit("application/addSplitscreen", splitscreenConf);
+      this.$store.commit("application/activeSplitscreenId", splitscreenConf.id);
+      this.$store.commit("application/splitscreenLoading", true);
+      this.loading = true;
+      this.$store.commit("application/showSplitscreen", true);
+
+      this.$store
+        .dispatch("gauges/loadMeanWaterlevels")
+        .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;
+        });
+    },
     gaugeLabel(gauge) {
       return `${gauge.properties.objname} (${this.isrsInfo(gauge).orc})`;
     },