diff --git a/index.html b/index.html
index 940013fd4ea084b59ce18b4e04f3615fbf3ac0ce..5997c90cf7e349bf09e5253809f3ca0a7debb6b7 100644
--- a/index.html
+++ b/index.html
@@ -131,24 +131,82 @@
                         <label for="droneMode">Drone View</label>
                       </div>
                       <br /> -->
-                      <div id="drop-down--bldg-parent">
-                        <span><strong>Building</strong></span>
+                      <div id="drop-down--bldg-data-point-parent">
+                        <span><strong>Building(s), Data Point(s)</strong></span>
                         <div class="nowrap">
-                          <select id="drop-down--bldg" multiple></select>
+                          <select
+                            id="drop-down--bldg-data-point"
+                            multiple
+                            size="5"
+                          >
+                            <!-- Note: The values of the option elements have to be unique  -->
+                            <optgroup label="Bau 101">
+                              <option>101/VL</option>
+                              <option>101/RL</option>
+                              <option>101/dT</option>
+                            </optgroup>
+                            <optgroup label="Bau 102">
+                              <option>102/VL</option>
+                              <option>102/RL</option>
+                              <option>102/dT</option>
+                            </optgroup>
+                            <optgroup label="Bau 107">
+                              <option>107/VL</option>
+                              <option>107/RL</option>
+                              <option>107/dT</option>
+                            </optgroup>
+                            <optgroup label="Bau 112">
+                              <option>112/VL</option>
+                              <option>112/RL</option>
+                              <option>112/dT</option>
+                            </optgroup>
+                            <optgroup label="Bau 125">
+                              <option>125/VL</option>
+                              <option>125/RL</option>
+                              <option>125/dT</option>
+                            </optgroup>
+                            <optgroup label="Bau 225">
+                              <option>225/VL</option>
+                              <option>225/RL</option>
+                              <option>225/dT</option>
+                              <option>225/Durchfluss</option>
+                              <option>225/Leistung</option>
+                              <option>225/Energie</option>
+                              <option>225/Energie_VERBR</option>
+                            </optgroup>
+                            <optgroup label="Other">
+                              <option>Außentemp</option>
+                            </optgroup>
+                          </select>
                         </div>
                       </div>
                       <br />
-                      <div id="drop-down--sensor-parent">
-                        <span><strong>Sensor</strong></span>
+                      <div id="drop-down--aggregation-type-parent">
+                        <span
+                          ><strong>Aggregation (Type, Duration)</strong></span
+                        >
                         <div class="nowrap">
-                          <select id="drop-down--sensor"></select>
+                          <select id="drop-down--aggregation-type">
+                            <option>None (raw data)</option>
+                            <option>Sum/Daily</option>
+                            <option>Sum/Monthly</option>
+                            <option>Maximum/Daily</option>
+                            <option>Maximum/Monthly</option>
+                            <option>Minimum/Daily</option>
+                            <option>Minimum/Monthly</option>
+                            <option>Average/Daily</option>
+                            <option>Average/Monthly</option>
+                          </select>
                         </div>
                       </div>
                       <br />
                       <div id="drop-down--sampling-rate-parent">
                         <span><strong>Sampling rate</strong></span>
                         <div class="nowrap">
-                          <select id="drop-down--sampling-rate"></select>
+                          <select id="drop-down--sampling-rate">
+                            <option>15 min</option>
+                            <option>60 min</option>
+                          </select>
                         </div>
                       </div>
                       <br />
@@ -156,11 +214,15 @@
                         <span><strong>Chart type</strong></span>
                         <div class="nowrap">
                           <select id="drop-down--chart-type">
+                            <option>Column</option>
                             <option>Line</option>
                             <option>Heatmap</option>
+                            <option>Scatter Plot</option>
                           </select>
                         </div>
                       </div>
+                      <br />
+                      <button id="btn-draw-chart">Draw Chart</button>
                       <!-- <span><strong>Display Options</strong></span>
                       <div class="nowrap">
                         <input id="shadows" type="checkbox" />
diff --git a/public/js/dropDownList.js b/public/js/dropDownList.js
index b59951573304eef9acfbd78ea359a479a8bb0fcb..14cde18483aee2fcd315418d6d4a356b770ee77a 100644
--- a/public/js/dropDownList.js
+++ b/public/js/dropDownList.js
@@ -29,165 +29,42 @@ import {
 
 import { vanillaSelectBox } from "./thirdparty/vanillaSelectBox.mjs";
 
-const buildingsAvailableSensorsArr = [
-  // ["--Select--", "", ""],
-
-  ["Bau 101", "Vorlauftemperatur", "15 min"],
-  ["Bau 101", "Vorlauftemperatur", "60 min"],
-  ["Bau 101", "Rücklauftemperatur", "15 min"],
-  ["Bau 101", "Rücklauftemperatur", "60 min"],
-
-  ["Bau 102", "Vorlauftemperatur", "15 min"],
-  ["Bau 102", "Vorlauftemperatur", "60 min"],
-  ["Bau 102", "Rücklauftemperatur", "15 min"],
-  ["Bau 102", "Rücklauftemperatur", "60 min"],
-
-  ["Bau 107", "Vorlauftemperatur", "15 min"],
-  ["Bau 107", "Vorlauftemperatur", "60 min"],
-  ["Bau 107", "Rücklauftemperatur", "15 min"],
-  ["Bau 107", "Rücklauftemperatur", "60 min"],
-
-  ["Bau 112", "Vorlauftemperatur", "15 min"],
-  ["Bau 112", "Vorlauftemperatur", "60 min"],
-  ["Bau 112", "Rücklauftemperatur", "15 min"],
-  ["Bau 112", "Rücklauftemperatur", "60 min"],
-
-  ["Bau 125", "Vorlauftemperatur", "15 min"],
-  ["Bau 125", "Vorlauftemperatur", "60 min"],
-  ["Bau 125", "Rücklauftemperatur", "15 min"],
-  ["Bau 125", "Rücklauftemperatur", "60 min"],
-
-  ["Bau 225", "Vorlauftemperatur", "15 min"],
-  ["Bau 225", "Vorlauftemperatur", "60 min"],
-  ["Bau 225", "Rücklauftemperatur", "15 min"],
-  ["Bau 225", "Rücklauftemperatur", "60 min"],
-  ["Bau 225", "Durchfluss", "15 min"],
-  ["Bau 225", "Durchfluss", "60 min"],
-  ["Bau 225", "Leistung", "15 min"],
-  ["Bau 225", "Leistung", "60 min"],
-  ["Bau 225", "Energie", "15 min"],
-  ["Bau 225", "Energie", "60 min"],
-  ["Bau 225", "Energie_VERBR", "15 min"],
-  ["Bau 225", "Energie_VERBR", "60 min"],
-];
-
-/**
- * Get the unique values from an array
- * @param {Array} dataArr Input array
- * @param {Number} index Integer representing a zero-based index of the columns in the array
- * @returns {Array} An array of unique options
- */
-const getUniqueValues = function (dataArr, index) {
-  const uniqueOptions = new Set();
-
-  dataArr.forEach((row) => uniqueOptions.add(row[index]));
-
-  return [...uniqueOptions];
-};
-
-/**
- * Populate the HTML elements that make up a drop down list
- * @param {Object} element HTMLElement object of a drop down list element
- * @param {Array} uniqueValuesArr An array of unique values
- * @returns {undefined}
- */
-const populateDropDown = function (element, uniqueValuesArr) {
-  element.innerHTML = "";
-
-  uniqueValuesArr.forEach((item) => {
-    const option = document.createElement("option");
-    option.textContent = item;
-    element.appendChild(option);
-  });
-};
-
-/**
- * Filter an array using filter strings of variable length
- * @param {Array} dataArr Input array
- * @param {Array} filtersAsArray An array of filter strings
- * @returns {Array} An array that contains the filter result
- */
-const filterArray = function (dataArr, filtersAsArray) {
-  return dataArr.filter((row) =>
-    filtersAsArray.every((filterItem, i) => filterItem === row[i])
-  );
-};
-
-/**
- * Create a drop down list in the HTML document
- * @param {Array} dataArr Input array
- * @param {Array} filtersAsArray An array of strings tp be used as filters
- * @param {Object} targetElement HTMLElement object of a drop down list element
- * @returns {undefined}
- */
-const makeDropDown = function (dataArr, filtersAsArray, targetElement) {
-  const filteredArr = filterArray(dataArr, filtersAsArray);
-
-  const uniqueList = getUniqueValues(filteredArr, filtersAsArray.length);
-
-  getUniqueValues(dataArr);
-
-  populateDropDown(targetElement, uniqueList);
-};
-
 /**
- * Use the `makeDropDown` function to create the first two levels of the linked drop down lists
+ * Use the `vanillaDropDown` library to style the first level drop down list
+ *
  * @returns {undefined}
  */
-const applyDropDownLevelOneTwo = function () {
-  const selectLevel1Value = document.querySelector("#drop-down--bldg").value;
-  const selectLevel2DOMString = "#drop-down--sensor";
-  const selectLevel2 = document.querySelector(selectLevel2DOMString);
-  makeDropDown(buildingsAvailableSensorsArr, [selectLevel1Value], selectLevel2);
-
-  applyDropDownLevelThree();
-
-  // Create our dropdown list using `vanillaSelectBox`
-  new vanillaSelectBox(selectLevel2DOMString, {
+const styleLevelOneDropDown = function () {
+  // Create our dropdown list using `vanillaSelectBox`; supports the selection of multiple options
+  new vanillaSelectBox("#drop-down--bldg-data-point", {
+    "disableSelectAll": true,
+    "maxSelect": 5,
     "placeHolder": "--Select--",
+    "search": false,
   });
 };
 
 /**
- * Use the `makeDropDown` function to create the third level of the linked drop down lists
+ * Use the `vanillaDropDown` library to style the second level drop down list
+ *
  * @returns {undefined}
  */
-const applyDropDownLevelThree = function () {
-  const selectLevel1Value = document.querySelector("#drop-down--bldg").value;
-  const selectLevel2Value = document.querySelector("#drop-down--sensor").value;
-  const selectLevel3DOMString = "#drop-down--sampling-rate";
-  const selectLevel3 = document.querySelector(selectLevel3DOMString);
-  makeDropDown(
-    buildingsAvailableSensorsArr,
-    [selectLevel1Value, selectLevel2Value],
-    selectLevel3
-  );
-
+const styleLevelTwoDropDown = function () {
   // Create our dropdown list using `vanillaSelectBox`
-  new vanillaSelectBox(selectLevel3DOMString, {
+  new vanillaSelectBox("#drop-down--aggregation-type", {
     "placeHolder": "--Select--",
   });
-
-  // Create our fourth level dropdown
-  styleFourthLevelDropDown();
 };
 
 /**
- * Use the `populateDropDown` function to populate the first level drop down
+ * Use the `vanillaDropDown` library to style the third level drop down list
+ *
  * @returns {undefined}
  */
-const populateFirstLevelDropDown = function () {
-  const selectLevel1DOMString = "#drop-down--bldg";
-  const selectLevel1 = document.querySelector(selectLevel1DOMString);
-  const uniqueList = getUniqueValues(buildingsAvailableSensorsArr, 0);
-  populateDropDown(selectLevel1, uniqueList);
-
-  // Create our dropdown list using `vanillaSelectBox`; supports the selection of multiple options
-  new vanillaSelectBox(selectLevel1DOMString, {
-    "disableSelectAll": true,
-    "maxSelect": 3,
+const styleLevelThreeDropDown = function () {
+  // Create our dropdown list using `vanillaSelectBox`
+  new vanillaSelectBox("#drop-down--sampling-rate", {
     "placeHolder": "--Select--",
-    "search": false,
   });
 };
 
@@ -196,22 +73,13 @@ const populateFirstLevelDropDown = function () {
  *
  * @returns {undefined}
  */
-const styleFourthLevelDropDown = function () {
-  const selectLevel4DOMString = "#drop-down--chart-type";
-
+const styleLevelFourDropDown = function () {
   // Create our dropdown list using `vanillaSelectBox`
-  new vanillaSelectBox(selectLevel4DOMString, {
+  new vanillaSelectBox("#drop-down--chart-type", {
     "placeHolder": "--Select--",
   });
 };
 
-document
-  .querySelector("#drop-down--bldg")
-  .addEventListener("change", applyDropDownLevelOneTwo);
-document
-  .querySelector("#drop-down--sensor")
-  .addEventListener("change", applyDropDownLevelThree);
-
 /**
  * Callback function that wraps the logic of populating the linked drop down lists.
  * Will run on `DOMContentLoaded` event
@@ -219,12 +87,12 @@ document
  * @returns {undefined}
  */
 const afterDocumentLoads = function () {
-  populateFirstLevelDropDown();
-  applyDropDownLevelOneTwo();
+  styleLevelOneDropDown();
+  styleLevelTwoDropDown();
+  styleLevelThreeDropDown();
+  styleLevelFourDropDown();
 };
 
-document.addEventListener("DOMContentLoaded", afterDocumentLoads);
-
 /**
  * Get the values from the currently selected options in the linked drop dpwn lists
  * @returns {Array} An array containing the values of the selected options
@@ -373,6 +241,8 @@ const selectChartTypeFromDropDown = async function () {
   }
 };
 
+document.addEventListener("DOMContentLoaded", afterDocumentLoads);
+
 document
   .querySelector("#drop-down--chart-type")
   .addEventListener("change", selectChartTypeFromDropDown);