--- a/client/src/fairway/Fairwayprofile.vue	Wed Oct 24 16:21:44 2018 +0200
+++ b/client/src/fairway/Fairwayprofile.vue	Wed Oct 24 16:41:51 2018 +0200
@@ -79,6 +79,7 @@
  */
 import * as d3 from "d3";
 import { mapState } from "vuex";
+import { displayError } from "../application/lib/errors.js";
 
 const GROUND_COLOR = "#4A2F06";
 
@@ -110,6 +111,9 @@
       const currentSurveyDate = this.selectedMorph.date_info;
       return this.currentProfile[currentSurveyDate];
     },
+    additionalData() {
+      return this.currentProfile[this.additionalSurvey];
+    },
     waterColor() {
       const result = this.waterLevels.find(
         x => x.level === this.selectedWaterLevel
@@ -119,11 +123,12 @@
   },
   data() {
     return {
-      additionalSurvey: ""
+      additionalSurvey: "",
+      wait: false
     };
   },
   watch: {
-    currentProfile() {
+    currentData() {
       this.drawDiagram();
     },
     width() {
@@ -144,7 +149,27 @@
   },
   methods: {
     selectAdditionalSurveyData() {
-      //
+      if (!this.additionalSurvey || this.wait) return;
+      this.$store
+        .dispatch("fairwayprofile/loadProfile", this.additionalSurvey)
+        .then(() => {
+          this.wait = false;
+          this.drawDiagram();
+        })
+        .catch(error => {
+          this.wait = false;
+          let status = "ERROR";
+          let data = error;
+          const response = error.response;
+          if (response) {
+            status = response.status;
+            data = response.data;
+          }
+          displayError({
+            title: "Backend Error",
+            message: `${status}: ${data.message || data}`
+          });
+        });
     },
     drawDiagram() {
       const chartDiv = document.querySelector(".fairwayprofile");
@@ -155,6 +180,7 @@
       const width = this.width - this.margin.right - 1.5 * this.margin.left;
       const height = this.height - this.margin.top - 2 * this.margin.bottom;
       const currentData = this.currentData;
+      const additionalData = this.additionalData;
       const {
         xScale,
         yScaleRight,
@@ -174,8 +200,22 @@
         yScaleRight,
         currentData,
         height,
-        width
+        width,
+        color: GROUND_COLOR,
+        strokeColor: "black"
       });
+      if (additionalData) {
+        this.drawProfile({
+          graph,
+          xScale,
+          yScaleRight,
+          additionalData,
+          height,
+          width,
+          color: "green",
+          strokeColor: "green"
+        });
+      }
       this.drawLabels({
         graph,
         xScale,
@@ -290,7 +330,15 @@
         .attr("stroke", this.waterColor)
         .attr("d", waterArea);
     },
-    drawProfile({ graph, xScale, yScaleRight, currentData, height }) {
+    drawProfile({
+      graph,
+      xScale,
+      yScaleRight,
+      currentData,
+      height,
+      color,
+      strokeColor
+    }) {
       for (let part of currentData) {
         let profileLine = d3
           .line()
@@ -312,15 +360,15 @@
         graph
           .append("path")
           .datum(part)
-          .attr("fill", GROUND_COLOR)
-          .attr("stroke", GROUND_COLOR)
+          .attr("fill", color)
+          .attr("stroke", color)
           .attr("stroke-width", 3)
           .attr("d", profileArea);
         graph
           .append("path")
           .datum(part)
           .attr("fill", "none")
-          .attr("stroke", "black")
+          .attr("stroke", strokeColor)
           .attr("stroke-linejoin", "round")
           .attr("stroke-linecap", "round")
           .attr("stroke-width", 3)

--- a/client/src/fairway/store.js	Wed Oct 24 16:21:44 2018 +0200
+++ b/client/src/fairway/store.js	Wed Oct 24 16:41:51 2018 +0200
@@ -96,7 +96,6 @@
             resolve(response);
           })
           .catch(error => {
-            commit("clear_auth");
             reject(error);
           });
       });