diff --git a/js/dashboard.js b/js/dashboard.js
index 145cf0b..1bf43c5 100644
--- a/js/dashboard.js
+++ b/js/dashboard.js
@@ -3,160 +3,208 @@
 //var ctx = document.getElementById('myChart')
 //var mainContent = document.getElementById('mainContent')
 
-function setPage(page) {
-  document.getElementById("navbarPage" + currentPage + "Link").classList.remove("active")
-  document.getElementById("navbarPage" + page + "Link").classList.add("active")
-  currentPage = page
-  // page: -1 for dashboard or sensor id
-  var mainContent = document.getElementById('mainContent')
+class BlueWeatherDashboard {
 
-  // set page to loading state
-  mainContent.innerHTML = "<div class=\"d-flex justify-content-center\"><div class=\"spinner-border\" role=\"status\"><span class=\"sr-only\">Loading...</span></div></div>"
+  constructor() {
+    // cunstruct xmlhttp
+    this.blueweather = new BlueWeather()
+    this.loc = this.blueweather.findGetParameter("locId")
+    this.currentPage = -1
+    this.setPage(this.currentPage)
+  }
 
-  blueweather.getLocationData(thisLoc, undefined, true, function(locationData){
+  setPage(page) {
+    document.getElementById("navbarPage" + this.currentPage + "Link").classList.remove("active")
+    document.getElementById("navbarPage" + page + "Link").classList.add("active")
+
+    this.currentPage = page
+    // page: -1 for dashboard or sensor id
+    var mainContent = document.getElementById('mainContent')
+
+    // set page to loading state
+    mainContent.innerHTML = "<div class=\"d-flex justify-content-center\"><div class=\"spinner-border\" role=\"status\"><span class=\"sr-only\">Loading...</span></div></div>"
+
+    this.blueweather.getLocationData(this.loc, undefined, true, function (locationData) {
       // refresh sensors list
-  loadSensors(locationData.sensors)
+      dashboard.loadSensors(locationData.sensors)
 
-  // set acive page in navbar
-  document.getElementById("navbarPage" + page + "Link").classList.add("active")
+      // set acive page in navbar
+      document.getElementById("navbarPage" + page + "Link").classList.add("active")
 
-  if(page === -1) {
-    setPageTitle("Dashboard")
-    mainContent.innerHTML = "<p>This is your great dashboard :))</p>"
-  }
-  else if (page !== -1) {
-    loadDiagram("mainContent", locationData, page)
-  }
-  })
-
-}
-
-function setTimeRange(from="", to=""){
-  blueweather.log("changing time range; form: " + from + "; to: " + to + "; (now is: " + new Date().getTime() + ")", 3)
-  
-  // set page to loading state
-  mainContent.innerHTML = "<div class=\"d-flex justify-content-center\"><div class=\"spinner-border\" role=\"status\"><span class=\"sr-only\">Loading...</span></div></div>"
-  
-  if(from !== "") {
-    from = new Date().getTime() / 1000 - from
-  }
-  
-  if(to !== "") {
-    to = new Date().getTime() / 1000 - parseInt(to)
-  }
-
-  blueweather.getLocationData(thisLoc, {from: from, to: to}, true, function(locationData){
-    loadDiagram("mainContent", locationData, currentPage)
-  })
-  
-}
-
-function loadSensors(sensors) {
-
-  var sensorsList = document.getElementById("sensorsList")
-  sensorsList.innerHTML = ""
-
-  for (var i = 0; i < sensors.length; i++) {
-    var currentHTML = sensorsList.innerHTML
-    sensorsList.innerHTML = currentHTML +
-      "<li class=\"nav-item\"><a class=\"nav-link\" id=\"navbarPage" + sensors[i]["id"] + "Link\" href=\"#\" onclick=\"setPage(" + sensors[i]["id"] + ")\"><span data-feather=\"file\"></span>" + sensors[i]["sensorname"] + "</a></li>"
-  }
-
-  feather.replace()
-}
-
-function loadDiagram(parentId, locationData, sensorId){
-  mainContent = document.getElementById(parentId)
-  // get all relevant  meassurement values
-  var vals = []
-
-  for (var i = 0; i < locationData["measvalues"].length; i++) {
-    var thisValue = locationData["measvalues"][i]
-    if (parseInt(thisValue['sensorid']) === sensorId) {
-      vals.push(thisValue)
-    }
-  }
-
-  // get the current sensor
-  var sensor;
-
-  for (i = 0; i < locationData['sensors'].length; i++) {
-    var thisSensor = locationData['sensors'][i]
-    if (parseInt(thisSensor.id) === sensorId) {
-      sensor = thisSensor;
-      break;
-    }
-  }
-
-  // get the value type
-  var valueType;
-
-  for (i = 0; i < locationData['valuetypes'].length; i++) {
-    var thisValType = locationData['valuetypes'][i]
-    if (parseInt(thisValType.id) === parseInt(sensor.valuetypeid)) {
-      valueType = thisValType;
-      break;
-    }
-  }
-
-  // build chart data array
-  var chartData = {
-    label: sensor.sensorname + " (" + valueType.valuetype + ")",
-    data: [],
-    range: locationData.range
-  }
-
-  for (i = 0; i < vals.length; i++) {
-    chartData.data.push({ x: vals[i]["timestamp"], y: vals[i]["measvalue"] })
-  }
-
-  mainContent.innerHTML = "<canvas class=\"my-4 w-100\" id=\"myChart\"></canvas>"
-  setPageTitle(chartData.label)
-
-  //blueweather.log("creating chart with data: " + JSON.stringify(chartData), 3)
-
-  createDiagram("myChart", chartData)
-}
-
-function createDiagram(canvasId, data, additional) {
-  var pointradius = data.data.length > 500 ? 0:3
-  // Graphs
-  var ctx = document.getElementById(canvasId)
-  // eslint-disable-next-line no-unused-vars
-
-  var chartData = {
-    //labels: time,
-    datasets: [
-      {
-        label: data.label,
-        yAxisID: 'yAxis',
-        fill: true, pointRadius: pointradius, backgroundColor: "rgba(29, 202, 255, 0.75)", borderColor: "rgba(29, 202, 255, 1)", pointHoverBackgroundColor: "rgba(29, 202, 255, 1)", pointHoverBorderColor: "rgba(29, 202, 255, 1)",
-        showLine: true,
-        data: data.data
+      if (page === -1) {
+        dashboard.setPageTitle("Dashboard")
+        mainContent.innerHTML = "<p>This is your great dashboard :))</p>"
       }
-    ]
-  };
+      else if (page !== -1) {
+        dashboard.loadDiagram("mainContent", locationData, page)
+      }
+    })
 
-  var chartOptions = {
-    responsive:true,
-    maintainAspectRatio: false,
-    scales: {
-      yAxes: [
+  }
+
+  setTimeRange(from = "", to = "") {
+    this.blueweather.log("changing time range; form: " + from + "; to: " + to + "; (now is: " + new Date().getTime() + ")", 3)
+
+    // set page to loading state
+    mainContent.innerHTML = "<div class=\"d-flex justify-content-center\"><div class=\"spinner-border\" role=\"status\"><span class=\"sr-only\">Loading...</span></div></div>"
+
+    if (from !== "") {
+      from = new Date().getTime() / 1000 - from
+    }
+
+    if (to !== "") {
+      to = new Date().getTime() / 1000 - parseInt(to)
+    }
+
+    this.blueweather.getLocationData(this.loc, { from: from, to: to }, true, function (locationData) {
+      dashboard.loadDiagram("mainContent", locationData, dashboard.currentPage)
+    })
+
+  }
+
+  loadSensors(sensors) {
+
+    var sensorsList = document.getElementById("sensorsList")
+    sensorsList.innerHTML = ""
+
+    for (var i = 0; i < sensors.length; i++) {
+      var currentHTML = sensorsList.innerHTML
+      sensorsList.innerHTML = currentHTML +
+        "<li class=\"nav-item\"><a class=\"nav-link\" id=\"navbarPage" + sensors[i]["id"] + "Link\" href=\"#\" onclick=\"dashboard.setPage(" + sensors[i]["id"] + ")\"><span data-feather=\"file\"></span>" + sensors[i]["sensorname"] + "</a></li>"
+    }
+
+    feather.replace()
+  }
+
+  loadDiagram(parentId, locationData, sensorId) {
+    mainContent = document.getElementById(parentId)
+    // get all relevant  meassurement values
+    var vals = []
+
+    for (var i = 0; i < locationData["measvalues"].length; i++) {
+      var thisValue = locationData["measvalues"][i]
+      if (parseInt(thisValue['sensorid']) === sensorId) {
+        vals.push(thisValue)
+      }
+    }
+
+    // get the current sensor
+    var sensor;
+
+    for (i = 0; i < locationData['sensors'].length; i++) {
+      var thisSensor = locationData['sensors'][i]
+      if (parseInt(thisSensor.id) === sensorId) {
+        sensor = thisSensor;
+        break;
+      }
+    }
+
+    // get the value type
+    var valueType;
+
+    for (i = 0; i < locationData['valuetypes'].length; i++) {
+      var thisValType = locationData['valuetypes'][i]
+      if (parseInt(thisValType.id) === parseInt(sensor.valuetypeid)) {
+        valueType = thisValType;
+        break;
+      }
+    }
+
+    // build chart data array
+    var chartData = {
+      data: [],
+      datasets: [
         {
-          id: 'yAxis',
-          type: 'linear',
-          position: 'left',
+          label: sensor.sensorname + " (" + valueType.valuetype + ")",
+          yAxisID: 'yAxis',
+          showLine: true,
+          data: vals
         }
       ],
+      range: locationData.range
+    }
 
-      xAxes: [{
-        ticks: {
-          min: parseInt(data.range.from), 
-          max: parseInt(data.range.to),
-          beginAtZero: false,
-          stepSize: (data.range.to - data.range.from) / 10,
-          userCallback: function (label, index, labels) {
-            var d = new Date(parseInt(label) * 1000);
+    
+
+    for (i = 0; i < vals.length; i++) {
+      chartData.data.push({ x: vals[i]["timestamp"], y: vals[i]["measvalue"] })
+    }
+
+    Object.assign(chartData.datasets[0], JSON.parse(valueType.displayproperty))
+    Object.assign(chartData.datasets[0], {data: chartData.data, pointRadius: chartData.data.length > 500 ? 0 : 3})
+
+    mainContent.innerHTML = "<canvas class=\"my-4 w-100\" id=\"myChart\"></canvas>"
+    this.setPageTitle(sensor.sensorname + " (" + valueType.valuetype + ")")
+
+    //blueweather.log("creating chart with data: " + JSON.stringify(chartData), 3)
+
+    this.createDiagram("myChart", chartData)
+  }
+
+  createDiagram(canvasId, data) {
+    // Graphs
+    var ctx = document.getElementById(canvasId)
+    // eslint-disable-next-line no-unused-vars
+
+    var chartData = {
+      //labels: time,
+      datasets: data.datasets
+    };
+
+    var chartOptions = {
+      responsive: true,
+      maintainAspectRatio: false,
+      scales: {
+        yAxes: [
+          {
+            id: 'yAxis',
+            type: 'linear',
+            position: 'left',
+          }
+        ],
+
+        xAxes: [{
+          ticks: {
+            min: parseInt(data.range.from),
+            max: parseInt(data.range.to),
+            beginAtZero: false,
+            stepSize: (data.range.to - data.range.from) / 10,
+            userCallback: function (label, index, labels) {
+              var d = new Date(parseInt(label) * 1000);
+              var datestr =
+                //  ("0" + d.getDate()).slice(-2) + "-" +
+                //  ("0"+(d.getMonth()+1)).slice(-2) + "-" +
+                //  d.getFullYear() + " " +
+                ("0" + d.getHours()).slice(-2) + ":" +
+                ("0" + d.getMinutes()).slice(-2) + ":" +
+                ("0" + d.getSeconds()).slice(-2)
+                ;
+              return datestr;
+            }
+          },
+
+          scaleLabel: {
+            display: true,
+            labelString: 'time'
+          }
+        }],
+      },
+
+      tooltips: {
+        callbacks: {
+          label: function (tooltipItem, data) {
+
+            var label = [data.datasets[tooltipItem.datasetIndex].label || ''];
+
+            if (label) {
+              label[0] += ': ';
+            }
+
+            label[0] += Math.round(tooltipItem.yLabel * 100) / 100;
+
+            var time = Math.round(tooltipItem.xLabel * 100) / 100;
+
+            var d = new Date(time * 1000);
             var datestr =
               //  ("0" + d.getDate()).slice(-2) + "-" +
               //  ("0"+(d.getMonth()+1)).slice(-2) + "-" +
@@ -165,62 +213,26 @@ function createDiagram(canvasId, data, additional) {
               ("0" + d.getMinutes()).slice(-2) + ":" +
               ("0" + d.getSeconds()).slice(-2)
               ;
-            return datestr;
+
+            label.push("Time: " + datestr);
+
+            return label;
           }
-        },
-
-        scaleLabel: {
-          display: true,
-          labelString: 'time'
-        }
-      }],
-    },
-
-    tooltips: {
-      callbacks: {
-        label: function (tooltipItem, data) {
-
-          var label = [data.datasets[tooltipItem.datasetIndex].label || ''];
-
-          if (label) {
-            label[0] += ': ';
-          }
-
-          label[0] += Math.round(tooltipItem.yLabel * 100) / 100;
-
-          var time = Math.round(tooltipItem.xLabel * 100) / 100;
-
-          var d = new Date(time * 1000);
-          var datestr =
-            //  ("0" + d.getDate()).slice(-2) + "-" +
-            //  ("0"+(d.getMonth()+1)).slice(-2) + "-" +
-            //  d.getFullYear() + " " +
-            ("0" + d.getHours()).slice(-2) + ":" +
-            ("0" + d.getMinutes()).slice(-2) + ":" +
-            ("0" + d.getSeconds()).slice(-2)
-            ;
-
-          label.push("Time: " + datestr);
-
-          return label;
         }
       }
-    }
 
-  };
+    };
 
-  var myChart = new Chart(ctx, {
-    type: 'scatter',
-    data: chartData,
-    options: chartOptions
-  })
-}
+    var myChart = new Chart(ctx, {
+      type: 'scatter',
+      data: chartData,
+      options: chartOptions
+    })
+  }
 
-function setPageTitle(title) {
-  document.getElementById("titleH1").innerHTML = title
-}
+  setPageTitle(title) {
+    document.getElementById("titleH1").innerHTML = title
+  }
+} 
 
-var blueweather = new BlueWeather()
-var thisLoc = blueweather.findGetParameter("locId")
-var currentPage = -1
-setPage(currentPage)
\ No newline at end of file
+dashboard = new BlueWeatherDashboard()
\ No newline at end of file