diff --git a/src/app/component/graph/graph.component.html b/src/app/component/graph/graph.component.html
index 9124d93..ac25917 100644
--- a/src/app/component/graph/graph.component.html
+++ b/src/app/component/graph/graph.component.html
@@ -2,16 +2,46 @@
   <div class="form-row">
     <div class="form-group col-md-2 ">
       <label for="xaxis"></label>
-      <select id="xaxis" class="form-control">
+      <select #xaxis (change)='updateXaxis(xaxis.value)' id="xaxis" class="form-control">
         <option selected>Choose x axis</option>
-        <option>...</option>
+        <option [value]="'mmsi'">mmsi</option>
+        <option [value]="'time'">time</option>
+        <option [value]="'latitude'">latitude</option>
+        <option [value]="'longitude'">longitude</option>
+        <option [value]="'speedOverGround'">speedOverGround</option>
+        <option [value]="'courseOverGround'">courseOverGround</option>
+        <option [value]="'heading'">heading</option>
+        <option [value]="'vesselName'">vesselName</option>
+        <option [value]="'imo'">imo</option>
+        <option [value]="'callSign'">callSign</option>
+        <option [value]="'vesselType'">vesselType</option>
+        <option [value]="'status'">status</option>
+        <option [value]="'length'">length</option>
+        <option [value]="'width'">width</option>
+        <option [value]="'draft'">draft</option>
+        <option [value]="'cargo'">cargo</option>
       </select>
     </div>
     <div class="form-group col-md-2 ">
       <label for="yaxis"></label>
-      <select id="yaxis" class="form-control">
-        <option selected>Choose y axis</option>
-        <option>...</option>
+      <select #yaxis (change)='updateYaxis(yaxis.value)' id="yaxis" class="form-control">
+        <option  selected>Choose y axis</option>
+        <option [value]="'mmsi'">mmsi</option>
+        <option [value]="'time'">time</option>
+        <option [value]="'latitude'">latitude</option>
+        <option [value]="'longitude'">longitude</option>
+        <option [value]="'speedOverGround'">speedOverGround</option>
+        <option [value]="'courseOverGround'">courseOverGround</option>
+        <option [value]="'heading'">heading</option>
+        <option [value]="'vesselName'">vesselName</option>
+        <option [value]="'imo'">imo</option>
+        <option [value]="'callSign'">callSign</option>
+        <option [value]="'vesselType'">vesselType</option>
+        <option [value]="'status'">status</option>
+        <option [value]="'length'">length</option>
+        <option [value]="'width'">width</option>
+        <option [value]="'draft'">draft</option>
+        <option [value]="'cargo'">cargo</option>
       </select>
     </div>
   </div>
diff --git a/src/app/component/graph/graph.component.ts b/src/app/component/graph/graph.component.ts
index 17d0d52..1e2bb95 100644
--- a/src/app/component/graph/graph.component.ts
+++ b/src/app/component/graph/graph.component.ts
@@ -10,6 +10,14 @@ import {Vessel} from '../../model/vessel';
 export class GraphComponent implements OnInit {
   selectedVessel: Vessel;
 
+  trace = {
+    x: [],
+    y: [],
+    mode: 'markers',
+    type: 'scatter',
+    name: '',
+  };
+
   constructor(private selectedVesselService: SelectedVesselService) {
   }
 
@@ -46,7 +54,7 @@ export class GraphComponent implements OnInit {
   connectSelectVesselObservable(): void {
     this.selectedVesselService.currentVessel.subscribe(vessels => {
       this.selectedVessel = vessels;
-      this.updateGraph();
+      this.initGraph();
     });
   }
 
@@ -56,22 +64,189 @@ export class GraphComponent implements OnInit {
     this.graph.layout.yaxis.title = '';
   }
 
-  updateGraph(): void {
+  updateXaxis(valueType: string): void {
+    this.trace.x = [];
+    switch (valueType) {
+      case 'mmsi':
+        this.selectedVessel.messages.forEach(value => {
+          this.trace.x.push(value.mmsi);
+        });
+        break;
+      case  'time':
+        this.selectedVessel.messages.forEach(value => {
+          this.trace.x.push(Date.parse(value.time) / 1000);
+        });
+        break;
+      case  'latitude':
+        this.selectedVessel.messages.forEach(value => {
+          this.trace.x.push(value.latitude);
+        });
+        break;
+      case  'longitude':
+        this.selectedVessel.messages.forEach(value => {
+          this.trace.x.push(value.longitude);
+        });
+        break;
+      case  'speedOverGround':
+        this.selectedVessel.messages.forEach(value => {
+          this.trace.x.push(value.speedOverGround);
+        });
+        break;
+      case  'courseOverGround':
+        this.selectedVessel.messages.forEach(value => {
+          this.trace.x.push(value.courseOverGround);
+        });
+        break;
+      case  'heading':
+        this.selectedVessel.messages.forEach(value => {
+          this.trace.x.push(value.heading);
+        });
+        break;
+      case  'vesselName':
+        this.selectedVessel.messages.forEach(value => {
+          this.trace.x.push(value.vesselName);
+        });
+        break;
+      case  'imo':
+        this.selectedVessel.messages.forEach(value => {
+          this.trace.x.push(value.imo);
+        });
+        break;
+      case  'callSign':
+        this.selectedVessel.messages.forEach(value => {
+          this.trace.x.push(value.callSign);
+        });
+        break;
+      case  'vesselType':
+        this.selectedVessel.messages.forEach(value => {
+          this.trace.x.push(value.vesselType);
+        });
+        break;
+      case  'status':
+        this.selectedVessel.messages.forEach(value => {
+          this.trace.x.push(value.status);
+        });
+        break;
+      case  'length':
+        this.selectedVessel.messages.forEach(value => {
+          this.trace.x.push(value.length);
+        });
+        break;
+      case  'width':
+        this.selectedVessel.messages.forEach(value => {
+          this.trace.x.push(value.width);
+        });
+        break;
+      case  'draft':
+        this.selectedVessel.messages.forEach(value => {
+          this.trace.x.push(value.draft);
+        });
+        break;
+      case  'cargo':
+        this.selectedVessel.messages.forEach(value => {
+          this.trace.x.push(value.cargo);
+        });
+        break;
+    }
+    this.graph.data = [];
+    this.graph.layout.xaxis.title = valueType;
+    this.graph.data.push(this.trace);
+  }
 
-    const trace1 = {
-      x: [],
-      y: [],
-      mode: 'markers',
-      type: 'scatter',
-      name: '',
-    };
-    this.selectedVessel.messages.forEach(value => {
-      trace1.x.push(value.longitude);
-      trace1.y.push(value.time);
-    });
-    this.graph.data.push(trace1);
-    this.graph.layout.xaxis.title = 'longitude';
-    this.graph.layout.yaxis.title = 'time';
+  updateYaxis(valueType: string): void {
+    this.trace.y = [];
+    switch (valueType) {
+      case 'mmsi':
+        this.selectedVessel.messages.forEach(value => {
+          this.trace.y.push(value.mmsi);
+        });
+        break;
+      case  'time':
+        this.selectedVessel.messages.forEach(value => {
+          this.trace.y.push(Date.parse(value.time) / 1000);
+        });
+        break;
+      case  'latitude':
+        this.selectedVessel.messages.forEach(value => {
+          this.trace.y.push(value.latitude);
+        });
+        break;
+      case  'longitude':
+        this.selectedVessel.messages.forEach(value => {
+          this.trace.y.push(value.longitude);
+        });
+        break;
+      case  'speedOverGround':
+        this.selectedVessel.messages.forEach(value => {
+          this.trace.y.push(value.speedOverGround);
+        });
+        break;
+      case  'courseOverGround':
+        this.selectedVessel.messages.forEach(value => {
+          this.trace.y.push(value.courseOverGround);
+        });
+        break;
+      case  'heading':
+        this.selectedVessel.messages.forEach(value => {
+          this.trace.y.push(value.heading);
+        });
+        break;
+      case  'vesselName':
+        this.selectedVessel.messages.forEach(value => {
+          this.trace.y.push(value.vesselName);
+        });
+        break;
+      case  'imo':
+        this.selectedVessel.messages.forEach(value => {
+          this.trace.y.push(value.imo);
+        });
+        break;
+      case  'callSign':
+        this.selectedVessel.messages.forEach(value => {
+          this.trace.y.push(value.callSign);
+        });
+        break;
+      case  'vesselType':
+        this.selectedVessel.messages.forEach(value => {
+          this.trace.y.push(value.vesselType);
+        });
+        break;
+      case  'status':
+        this.selectedVessel.messages.forEach(value => {
+          this.trace.y.push(value.status);
+        });
+        break;
+      case  'length':
+        this.selectedVessel.messages.forEach(value => {
+          this.trace.y.push(value.length);
+        });
+        break;
+      case  'width':
+        this.selectedVessel.messages.forEach(value => {
+          this.trace.y.push(value.width);
+        });
+        break;
+      case  'draft':
+        this.selectedVessel.messages.forEach(value => {
+          this.trace.y.push(value.draft);
+        });
+        break;
+      case  'cargo':
+        this.selectedVessel.messages.forEach(value => {
+          this.trace.y.push(value.cargo);
+        });
+        break;
+    }
+    this.graph.data = [];
+    this.graph.layout.yaxis.title = valueType;
+    this.graph.data.push(this.trace);
+  }
+
+
+  initGraph(): void {
+    this.graph.data.push(this.trace);
+    this.graph.layout.xaxis.title = '';
+    this.graph.layout.yaxis.title = '';
   }
 
 }