--- a/client/src/fairway/Fairwayprofile.vue	Thu Sep 13 12:59:18 2018 +0200
+++ b/client/src/fairway/Fairwayprofile.vue	Thu Sep 13 13:02:04 2018 +0200
@@ -1,8 +1,6 @@
 <template>
-  <div class="fairwayprofile">
-    <svg :width="width +'px'" :height="height +'px'">
-    </svg>
-  </div>
+    <div class="fairwayprofile">
+    </div>
 </template>
 
 <style lang="scss">
@@ -21,30 +19,59 @@
 const WATER_COLOR = "#005DFF";
 const GROUND_COLOR = "#4A2F06";
 
-const sampleData = [
-  { x: 0, y: 1.0 },
-  { x: 10, y: 1.0 },
-  { x: 25, y: -2.0 },
-  { x: 50, y: -4.5 },
-  { x: 75, y: -4.0 },
-  { x: 100, y: -3.0 },
-  { x: 125, y: -4.0 },
-  { x: 150, y: -5.0 },
-  { x: 175, y: -4.0 },
-  { x: 200, y: -3.0 },
-  { x: 225, y: -3.5 },
-  { x: 250, y: -3.0 },
-  { x: 290, y: 1 },
-  { x: 300, y: 1 }
-];
-
 export default {
   name: "fairwayprofile",
-  props: ["width", "height", "xScale", "yScaleLeft", "yScaleRight", "margin"],
+  props: [
+    "data",
+    "width",
+    "height",
+    "xScale",
+    "yScaleLeft",
+    "yScaleRight",
+    "margin"
+  ],
   data() {
     return {};
   },
+  watch: {
+    width() {
+      this.drawDiagram();
+    },
+    height() {
+      this.drawDiagram();
+    }
+  },
   methods: {
+    drawDiagram() {
+      const chartDiv = document.querySelector(".fairwayprofile");
+      d3.select("svg").remove();
+      let svg = d3.select(chartDiv).append("svg");
+      svg.attr("width", this.width);
+      svg.attr("height", this.height);
+      const width = this.width - this.margin.right - this.margin.left;
+      const height = this.height - this.margin.top - this.margin.bottom;
+      const currentData = this.data;
+      const { xScale, yScaleRight, graph } = this.generateCoordinates(
+        svg,
+        height,
+        width
+      );
+      this.drawWaterlevel({
+        graph,
+        xScale,
+        yScaleRight,
+        height,
+        width
+      });
+      this.drawProfile({
+        graph,
+        xScale,
+        yScaleRight,
+        currentData,
+        height,
+        width
+      });
+    },
     generateCoordinates(svg, height, width) {
       let xScale = d3
         .scaleLinear()
@@ -99,7 +126,7 @@
         .attr("stroke", WATER_COLOR)
         .attr("d", waterArea);
     },
-    drawProfile({ graph, xScale, yScaleRight, sampleData, height }) {
+    drawProfile({ graph, xScale, yScaleRight, currentData, height }) {
       let profileLine = d3
         .line()
         .x(d => {
@@ -119,14 +146,14 @@
         });
       graph
         .append("path")
-        .datum(sampleData)
+        .datum(currentData)
         .attr("fill", GROUND_COLOR)
         .attr("stroke", GROUND_COLOR)
         .attr("stroke-width", 3)
         .attr("d", profileArea);
       graph
         .append("path")
-        .datum(sampleData)
+        .datum(currentData)
         .attr("fill", "none")
         .attr("stroke", "black")
         .attr("stroke-linejoin", "round")
@@ -136,30 +163,7 @@
     }
   },
   mounted() {
-    let svg = d3.select("svg");
-    const width = this.width - this.margin.right - this.margin.left;
-    const height = this.height - this.margin.top - this.margin.bottom;
-
-    const { xScale, yScaleRight, graph } = this.generateCoordinates(
-      svg,
-      height,
-      width
-    );
-    this.drawWaterlevel({
-      graph,
-      xScale,
-      yScaleRight,
-      height,
-      width
-    });
-    this.drawProfile({
-      graph,
-      xScale,
-      yScaleRight,
-      sampleData,
-      height,
-      width
-    });
+    this.drawDiagram();
   }
 };
 </script>