From abffa93849195b72c30760f16d166aa4b479ecc0 Mon Sep 17 00:00:00 2001
From: "felix.gateru" <felix.gateru@gmail.com>
Date: Mon, 11 Mar 2024 16:53:45 +0300
Subject: [PATCH 1/4] Add data to horizontal bar chart

Signed-off-by: felix.gateru <felix.gateru@gmail.com>
---
 ui/web/static/js/charts.js                    | 61 ++++++++++++++++---
 .../charts/horizontalbarchartmodal.html       | 45 ++++----------
 2 files changed, 63 insertions(+), 43 deletions(-)

diff --git a/ui/web/static/js/charts.js b/ui/web/static/js/charts.js
index 2b55ad99..ef694380 100644
--- a/ui/web/static/js/charts.js
+++ b/ui/web/static/js/charts.js
@@ -706,13 +706,7 @@ class HorizontalBarChart extends Echart {
           },
           dataset: {
             source: [
-              ['score', 'amount', 'product'],
-              [79.3,85212, 'thing1'],
-              [57.1, 78254, 'thing2'],
-              [14.4, 41032, 'thing3'],
-              [30.1, 12755, 'thing4'],
-              [18.7, 20145, 'thing5'],
-              [88.1, 89146, 'thing6'],
+              [],
             ]
           },
           grid: { containLabel: true },
@@ -731,7 +725,7 @@ class HorizontalBarChart extends Echart {
           visualMap: {
             orient: 'horizontal',
             left: 'center',
-            min: 10,
+            min: 0,
             max: 100,
             text: ['High temperature', 'Low temperature'],
             // Map the score column to color
@@ -751,7 +745,56 @@ class HorizontalBarChart extends Echart {
           ]
         };
 
-      horizontalBarChart.setOption(option);`;
+      horizontalBarChart.setOption(option);
+      var chartData = {
+        channel: '${this.chartData.channel}',
+        publisher: '${this.chartData.thing}',
+        name: '${this.chartData.valueName}',
+        from: ${this.chartData.startTime},
+        to: ${this.chartData.stopTime},
+        aggregation: '${this.chartData.aggregationType}',
+        limit: 100,
+        interval : getInterval(),
+      }
+      
+      async getData(horizontalBarChart, chartData) {
+        try {
+          const apiEndpoint = "/data?channel=" + chartData.channel +
+          "&name=" + chartData.name +
+          "&from=" + chartData.from +
+          "&to=" + chartData.to +
+          "&aggregation=" + chartData.aggregation +
+          "&limit=" + chartData.limit +
+          "&interval=" + chartData.interval;
+
+          const response = await fetch(apiEndpoint);
+    
+          if (!response.ok) {
+            throw new Error('API request failed with status ${response.status}');
+          }
+    
+          const data = await response.json();
+          updateChart(data);
+    
+        } catch (error) {
+          console.error("Error fetching data:", error);
+          // Handle the error (e.g., display an error message)
+        } finally {
+          // Schedule the next update
+          setTimeout(() => this.fetchDataAndUpdate(), 5000); // Example: 5 seconds 
+        }
+      }
+    
+      updateChart(data) {
+        const barChart = echarts.init(document.getElementById(this.ID));
+        const option = barChart.getOption(); // Get the existing options
+        
+        option.series[0].data = data.seriesData; 
+    
+        barChart.setOption(option); // Update the chart
+      }
+    }
+      `;
   }
 }
 
diff --git a/ui/web/templates/charts/horizontalbarchartmodal.html b/ui/web/templates/charts/horizontalbarchartmodal.html
index 5d5a6c9a..411152a4 100644
--- a/ui/web/templates/charts/horizontalbarchartmodal.html
+++ b/ui/web/templates/charts/horizontalbarchartmodal.html
@@ -76,19 +76,6 @@ <h5 class="modal-title" id="horizontalBarChartModalLabel">Horizontal Bar Chart</
                   />
                   <div class="invalid-feedback">Please enter a valid uuid</div>
                 </div>
-                <div class="mb-3">
-                  <label for="thing-id" class="form-label">Thing IDs</label>
-                  <input
-                    type="text"
-                    pattern="{{ .UUIDPattern }}"
-                    class="form-control mb-3"
-                    name="thing"
-                    id="thing-id"
-                    placeholder="Enter the thing IDs"
-                    required
-                  />
-                  <div class="invalid-feedback">Please enter a valid uuid</div>
-                </div>
                 <div class="mb-3">
                   <label for="value-name" class="form-label">Value name</label>
                   <input
@@ -100,19 +87,6 @@ <h5 class="modal-title" id="horizontalBarChartModalLabel">Horizontal Bar Chart</
                     required
                   />
                 </div>
-                <div class="mb-3">
-                  <label for="update-interval" class="form-label">Update interval</label>
-                  <input
-                    type="text"
-                    pattern="{{ .IntervalPattern }}"
-                    class="form-control mb-3"
-                    name="updateInterval"
-                    id="update-interval"
-                    placeholder="Enter the update interval, eg. 5s, 10m, 1h, 1d"
-                    required
-                  />
-                  <div class="invalid-feedback">Please enter a valid interval</div>
-                </div>
                 <div class="mb-3">
                   <label for="aggregation-type" class="form-label">Aggregation</label>
                   <select class="form-select mb-3" name="aggregationType" id="aggregation-type">
@@ -197,7 +171,12 @@ <h5 class="modal-title" id="horizontalBarChartModalLabel">Horizontal Bar Chart</
         let chartData = {};
         let formData = new FormData(form);
         for (var pair of formData.entries()) {
-          chartData[pair[0]] = pair[1];
+          if (pair[0] === "startTime" || pair[0] === "stopTime") {
+            const inputDate = new Date(pair[1]);
+            chartData[pair[0]] = inputDate.getTime() * 1e6;
+          } else {
+            chartData[pair[0]] = pair[1];
+          }
         }
 
         var widgetID = "horizontalBarchart-" + Date.now();
@@ -211,12 +190,10 @@ <h5 class="modal-title" id="horizontalBarChartModalLabel">Horizontal Bar Chart</
         bootstrap.Modal.getInstance(document.getElementById("horizontalBarChartModal")).hide();
       });
 
-    document
-      .getElementById("horizontalBarChartModal")
-      .addEventListener("hidden.bs.modal", function () {
-        const form = document.getElementById("create-horizontalBarChart-form");
-        form.reset();
-        form.classList.remove("was-validated");
-      });
+    document.getElementById("horizontalBarChartModal").addEventListener("click", function () {
+      const form = document.getElementById("create-horizontalBarChart-form");
+      form.reset();
+      form.classList.remove("was-validated");
+    });
   </script>
 {{ end }}

From b36f2c906192131e57a1da740d96b5e30be4fa84 Mon Sep 17 00:00:00 2001
From: 1998-felix <felix.gateru@gmail.com>
Date: Fri, 15 Mar 2024 11:28:48 +0300
Subject: [PATCH 2/4] feat: Change chart modal for data sources

Signed-off-by: 1998-felix <felix.gateru@gmail.com>
---
 ui/web/static/js/charts.js                    |  95 +++++++-----
 .../charts/horizontalbarchartmodal.html       | 143 ++++++++++++++----
 2 files changed, 171 insertions(+), 67 deletions(-)

diff --git a/ui/web/static/js/charts.js b/ui/web/static/js/charts.js
index ef694380..294b9242 100644
--- a/ui/web/static/js/charts.js
+++ b/ui/web/static/js/charts.js
@@ -706,7 +706,10 @@ class HorizontalBarChart extends Echart {
           },
           dataset: {
             source: [
-              [],
+              [
+                "thing",
+                "value"
+            ],
             ]
           },
           grid: { containLabel: true },
@@ -727,7 +730,7 @@ class HorizontalBarChart extends Echart {
             left: 'center',
             min: 0,
             max: 100,
-            text: ['High temperature', 'Low temperature'],
+            text: ['High', 'Low'],
             // Map the score column to color
             dimension: 0,
             inRange: {
@@ -747,53 +750,73 @@ class HorizontalBarChart extends Echart {
 
       horizontalBarChart.setOption(option);
       var chartData = {
-        channel: '${this.chartData.channel}',
-        publisher: '${this.chartData.thing}',
+        channels: '${this.chartData.channels}'.split(','),
+        things: '${this.chartData.things}'.split(','),
         name: '${this.chartData.valueName}',
         from: ${this.chartData.startTime},
         to: ${this.chartData.stopTime},
         aggregation: '${this.chartData.aggregationType}',
         limit: 100,
-        interval : getInterval(),
-      }
-      
-      async getData(horizontalBarChart, chartData) {
+      };
+      fetchData(horizontalBarChart, chartData);
+
+      async function fetchData(horizontalBarChart, chartData) {
         try {
-          const apiEndpoint = "/data?channel=" + chartData.channel +
-          "&name=" + chartData.name +
-          "&from=" + chartData.from +
-          "&to=" + chartData.to +
-          "&aggregation=" + chartData.aggregation +
-          "&limit=" + chartData.limit +
-          "&interval=" + chartData.interval;
-
-          const response = await fetch(apiEndpoint);
+            const plotData = [['value', 'thing']];
     
-          if (!response.ok) {
-            throw new Error('API request failed with status ${response.status}');
-          }
-    
-          const data = await response.json();
-          updateChart(data);
+            for (let i = 0; i < chartData.channels.length; i++) {
+                const apiEndpoint = '${pathPrefix}/data?channel=' + chartData.channels[i] +
+                    '&name=' + chartData.name +
+                    '&from='+ chartData.from +
+                    '&to=' + chartData.to +
+                    '&aggregation=' + chartData.aggregation +
+                    '&limit=10' +
+                    '&interval=' + getInterval(chartData) +
+                    '&publisher=' + chartData.things[i];
     
+                const response = await fetch(apiEndpoint);
+                if (!response.ok) {
+                    throw new Error('HTTP request failed with status:', response.status)
+                }
+                const data = await response.json();
+                plotData.push([data.messages[0].value, 'thing'+i.toString()]);
+            }
+            updateChart(horizontalBarChart, plotData);
         } catch (error) {
-          console.error("Error fetching data:", error);
-          // Handle the error (e.g., display an error message)
-        } finally {
-          // Schedule the next update
-          setTimeout(() => this.fetchDataAndUpdate(), 5000); // Example: 5 seconds 
+            console.error("Error fetching data:", error);
         }
       }
     
-      updateChart(data) {
-        const barChart = echarts.init(document.getElementById(this.ID));
-        const option = barChart.getOption(); // Get the existing options
-        
-        option.series[0].data = data.seriesData; 
-    
-        barChart.setOption(option); // Update the chart
+      function updateChart(horizontalBarChart, plotData) {
+        option = horizontalBarChart.getOption();
+        option.series[0].encode.x = 'value';
+        option.series[0].encode.y = 'thing';
+        option.visualMap.text = ['High', 'Low'];
+        option.dataset[0].source = plotData;
+        horizontalBarChart.setOption(option);
+      }
+
+      function getInterval(chartData) {
+        const interval = chartData.to - chartData.from;
+        const nanosecondsPerSecond = 1e3;
+        const secondsPerMinute = 60;
+        const minutesPerHour = 60;
+        let minutes = 0;
+        let hours = 0;
+        let intervalString = "";
+
+        let seconds = parseInt(interval) / nanosecondsPerSecond;
+        intervalString = Math.ceil(seconds).toString() +'s';
+        if (seconds >= secondsPerMinute) {
+          minutes = seconds/ secondsPerMinute;
+          intervalString = Math.ceil(minutes).toString() + 'm';
+        }
+        if (minutes >= minutesPerHour) {
+          hours = minutes /minutesPerHour;
+          intervalString = Math.ceil(hours).toString() + 'h';
+        }
+        return intervalString;      
       }
-    }
       `;
   }
 }
diff --git a/ui/web/templates/charts/horizontalbarchartmodal.html b/ui/web/templates/charts/horizontalbarchartmodal.html
index 411152a4..ea005a9b 100644
--- a/ui/web/templates/charts/horizontalbarchartmodal.html
+++ b/ui/web/templates/charts/horizontalbarchartmodal.html
@@ -63,27 +63,79 @@ <h5 class="modal-title" id="horizontalBarChartModalLabel">Horizontal Bar Chart</
                 role="tabpanel"
                 aria-labelledby="data-tab"
               >
+                <div class="table-responsive-md mb-3 p-2 border rounded">
+                  <h5>Data Source</h5>
+                  <table class="table" id="linechart-data">
+                    <thead>
+                      <tr>
+                        <th scope="col">Channel</th>
+                        <th scope="col">Thing</th>
+                        <th scope="col"></th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr>
+                        <td>
+                          <input
+                            type="text"
+                            pattern="{{ .UUIDPattern }}"
+                            class="form-control"
+                            name="channel"
+                            placeholder="channel ID"
+                            required
+                          />
+                        </td>
+                        <td>
+                          <input
+                            type="text"
+                            pattern="{{ .UUIDPattern }}"
+                            class="form-control"
+                            name="thing"
+                            placeholder="thing ID"
+                            required
+                          />
+                        </td>
+                        <td class="text-center">
+                          <button type="button" class="btn btn-sm" onclick="removeRow(this)">
+                            <i class="fas fa-trash-alt"></i>
+                          </button>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                  <button type="button" class="btn body-button btn-sm" onclick="addRow()">
+                    Add source
+                  </button>
+                </div>
                 <div class="mb-3">
-                  <label for="channel-id" class="form-label">Channel ID</label>
+                  <label for="value-name" class="form-label">Value name</label>
                   <input
                     type="text"
-                    pattern="{{ .UUIDPattern }}"
                     class="form-control mb-3"
-                    name="channel"
-                    id="channel-id"
-                    placeholder="Enter the channel ID"
+                    name="valueName"
+                    id="value-name"
+                    placeholder="Enter the value name eg. temperature"
                     required
                   />
-                  <div class="invalid-feedback">Please enter a valid uuid</div>
                 </div>
                 <div class="mb-3">
-                  <label for="value-name" class="form-label">Value name</label>
+                  <label for="start-time" class="form-label">Start time</label>
                   <input
-                    type="text"
+                    type="datetime-local"
                     class="form-control mb-3"
-                    name="valueName"
-                    id="value-name"
-                    placeholder="Enter the value name eg. temperature"
+                    name="startTime"
+                    id="start-time"
+                    required
+                  />
+                  <div class="invalid-time"></div>
+                </div>
+                <div class="mb-3">
+                  <label for="stop-time" class="form-label">Stop time</label>
+                  <input
+                    type="datetime-local"
+                    class="form-control mb-3"
+                    name="stopTime"
+                    id="stop-time"
                     required
                   />
                 </div>
@@ -141,14 +193,7 @@ <h5 class="modal-title" id="horizontalBarChartModalLabel">Horizontal Bar Chart</
           </form>
         </div>
         <div class="modal-footer">
-          <button
-            type="button"
-            class="btn btn-secondary"
-            id="close-horizontalBarChart-button"
-            data-bs-dismiss="modal"
-          >
-            Close
-          </button>
+          <button type="button" class="btn btn-secondary" onclick="resetForm();">Close</button>
           <button type="button" class="btn body-button" id="create-horizontalBarChart-button">
             Create Chart
           </button>
@@ -169,31 +214,67 @@ <h5 class="modal-title" id="horizontalBarChartModalLabel">Horizontal Bar Chart</
 
         // Create an object to store the form data
         let chartData = {};
+        const channels = [];
+        const things = [];
         let formData = new FormData(form);
         for (var pair of formData.entries()) {
-          if (pair[0] === "startTime" || pair[0] === "stopTime") {
-            const inputDate = new Date(pair[1]);
-            chartData[pair[0]] = inputDate.getTime() * 1e6;
-          } else {
-            chartData[pair[0]] = pair[1];
+          switch (pair[0]) {
+            case "startTime":
+            case "stopTime":
+              const inputDate = new Date(pair[1]);
+              chartData[pair[0]] = inputDate.getTime() * 1e6;
+              break;
+            case "channel":
+              channels.push(pair[1]);
+              break;
+            case "thing":
+              things.push(pair[1]);
+              break;
+            default:
+              chartData[pair[0]] = pair[1];
+              break;
           }
         }
 
         var widgetID = "horizontalBarchart-" + Date.now();
 
         chartData["Type"] = "horizontalBarChart";
+        chartData["channels"] = channels;
+        chartData["things"] = things;
         addWidget(chartData, widgetID);
         metadataBuffer[widgetID] = chartData;
-
-        form.reset();
-        form.classList.remove("was-validated");
-        bootstrap.Modal.getInstance(document.getElementById("horizontalBarChartModal")).hide();
+        resetForm();
       });
 
-    document.getElementById("horizontalBarChartModal").addEventListener("click", function () {
+    function resetForm() {
       const form = document.getElementById("create-horizontalBarChart-form");
-      form.reset();
       form.classList.remove("was-validated");
-    });
+      form.reset();
+      bootstrap.Modal.getInstance(document.getElementById("horizontalBarChartModal")).hide();
+    }
+
+    function addRow() {
+      const uuidPattern = "{{ .UUIDPattern }}";
+      const table = document.getElementById("linechart-data");
+      const newRow = table.insertRow(-1);
+      newRow.innerHTML = ` <td>
+            <input type="text" pattern="${uuidPattern}" class="form-control" name="channel"
+              placeholder="channel ID" required  />
+        </td>
+        <td>
+          <input type="text" pattern="${uuidPattern}" class="form-control" name="thing"
+            placeholder="thing ID" required  />
+       </td>
+        <td class="text-center">
+          <button type="button" class="btn btn-sm" onclick="removeRow(this)">
+            <i class="fas fa-trash-alt"></i>
+          </button>
+        </td>`;
+    }
+
+    function removeRow(button) {
+      const row = button.parentNode.parentNode;
+      row.parentNode.removeChild(row);
+    }
   </script>
 {{ end }}

From e6e6f1ec55daebf33b9a45e06f44b2d4063d89a5 Mon Sep 17 00:00:00 2001
From: 1998-felix <felix.gateru@gmail.com>
Date: Mon, 18 Mar 2024 12:45:19 +0300
Subject: [PATCH 3/4] fix: Unify close button behaviour

Signed-off-by: 1998-felix <felix.gateru@gmail.com>
---
 ui/web/templates/charts/horizontalbarchartmodal.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/web/templates/charts/horizontalbarchartmodal.html b/ui/web/templates/charts/horizontalbarchartmodal.html
index ea005a9b..5191e335 100644
--- a/ui/web/templates/charts/horizontalbarchartmodal.html
+++ b/ui/web/templates/charts/horizontalbarchartmodal.html
@@ -18,7 +18,7 @@ <h5 class="modal-title" id="horizontalBarChartModalLabel">Horizontal Bar Chart</
           <button
             type="button"
             class="btn-close"
-            data-bs-dismiss="modal"
+            onclick="resetForm();"
             aria-label="Close"
           ></button>
         </div>
@@ -222,7 +222,7 @@ <h5>Data Source</h5>
             case "startTime":
             case "stopTime":
               const inputDate = new Date(pair[1]);
-              chartData[pair[0]] = inputDate.getTime() * 1e6;
+              chartData[pair[0]] = inputDate.getTime();
               break;
             case "channel":
               channels.push(pair[1]);

From 179d58baf458bb99cb3c1ec1c820ebfb3dbe1e67 Mon Sep 17 00:00:00 2001
From: 1998-felix <felix.gateru@gmail.com>
Date: Wed, 20 Mar 2024 10:10:03 +0300
Subject: [PATCH 4/4] feat: Remove conversion to unix Nano

Signed-off-by: 1998-felix <felix.gateru@gmail.com>
---
 ui/web/static/js/charts.js                    |  4 +-
 .../charts/horizontalbarchartmodal.html       | 70 +++++++++++++++----
 2 files changed, 57 insertions(+), 17 deletions(-)

diff --git a/ui/web/static/js/charts.js b/ui/web/static/js/charts.js
index 294b9242..a2169fc7 100644
--- a/ui/web/static/js/charts.js
+++ b/ui/web/static/js/charts.js
@@ -798,14 +798,14 @@ class HorizontalBarChart extends Echart {
 
       function getInterval(chartData) {
         const interval = chartData.to - chartData.from;
-        const nanosecondsPerSecond = 1e3;
+        const millisecondsPerSecond = 1e3;
         const secondsPerMinute = 60;
         const minutesPerHour = 60;
         let minutes = 0;
         let hours = 0;
         let intervalString = "";
 
-        let seconds = parseInt(interval) / nanosecondsPerSecond;
+        let seconds = parseInt(interval) / millisecondsPerSecond;
         intervalString = Math.ceil(seconds).toString() +'s';
         if (seconds >= secondsPerMinute) {
           minutes = seconds/ secondsPerMinute;
diff --git a/ui/web/templates/charts/horizontalbarchartmodal.html b/ui/web/templates/charts/horizontalbarchartmodal.html
index 5191e335..521e001b 100644
--- a/ui/web/templates/charts/horizontalbarchartmodal.html
+++ b/ui/web/templates/charts/horizontalbarchartmodal.html
@@ -18,7 +18,7 @@ <h5 class="modal-title" id="horizontalBarChartModalLabel">Horizontal Bar Chart</
           <button
             type="button"
             class="btn-close"
-            onclick="resetForm();"
+            onclick="closeForm();"
             aria-label="Close"
           ></button>
         </div>
@@ -65,7 +65,7 @@ <h5 class="modal-title" id="horizontalBarChartModalLabel">Horizontal Bar Chart</
               >
                 <div class="table-responsive-md mb-3 p-2 border rounded">
                   <h5>Data Source</h5>
-                  <table class="table" id="linechart-data">
+                  <table class="table" id="horizontalbarchart-data">
                     <thead>
                       <tr>
                         <th scope="col">Channel</th>
@@ -193,7 +193,7 @@ <h5>Data Source</h5>
           </form>
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" onclick="resetForm();">Close</button>
+          <button type="button" class="btn btn-secondary" onclick="closeForm();">Close</button>
           <button type="button" class="btn body-button" id="create-horizontalBarChart-button">
             Create Chart
           </button>
@@ -203,10 +203,10 @@ <h5>Data Source</h5>
   </div>
   <script>
     // horizontal bar chart form
+    const form = document.getElementById("create-horizontalBarChart-form");
     document
       .getElementById("create-horizontalBarChart-button")
       .addEventListener("click", function () {
-        const form = document.getElementById("create-horizontalBarChart-form");
         if (!form.checkValidity()) {
           form.classList.add("was-validated");
           return;
@@ -217,25 +217,35 @@ <h5>Data Source</h5>
         const channels = [];
         const things = [];
         let formData = new FormData(form);
-        for (var pair of formData.entries()) {
-          switch (pair[0]) {
+        for (let [name, value] of formData) {
+          switch (name) {
             case "startTime":
             case "stopTime":
-              const inputDate = new Date(pair[1]);
-              chartData[pair[0]] = inputDate.getTime();
+              const inputDate = new Date(value);
+              chartData[name] = inputDate.getTime();
               break;
             case "channel":
-              channels.push(pair[1]);
+              channels.push(value);
               break;
             case "thing":
-              things.push(pair[1]);
+              things.push(value);
               break;
             default:
-              chartData[pair[0]] = pair[1];
+              chartData[name] = value;
               break;
           }
         }
 
+        if (chartData.stopTime <= chartData.startTime) {
+          const invalidTimeFeedback = form.querySelector(".invalid-time");
+          invalidTimeFeedback.innerHTML = "Stop time should be greater than start time";
+          invalidTimeFeedback.style.color = "red";
+          const invalidTimeInput = form.querySelector("#stop-time");
+          invalidTimeInput.classList.remove("was-validated");
+          invalidTimeInput.classList.add("is-invalid");
+          return;
+        }
+
         var widgetID = "horizontalBarchart-" + Date.now();
 
         chartData["Type"] = "horizontalBarChart";
@@ -243,19 +253,21 @@ <h5>Data Source</h5>
         chartData["things"] = things;
         addWidget(chartData, widgetID);
         metadataBuffer[widgetID] = chartData;
-        resetForm();
+        closeForm();
       });
 
-    function resetForm() {
-      const form = document.getElementById("create-horizontalBarChart-form");
+    function closeForm() {
       form.classList.remove("was-validated");
+      form.querySelector(".invalid-time").innerHTML = "";
+      form.querySelector("#stop-time").classList.remove("is-invalid");
       form.reset();
+      resetTable();
       bootstrap.Modal.getInstance(document.getElementById("horizontalBarChartModal")).hide();
     }
 
     function addRow() {
       const uuidPattern = "{{ .UUIDPattern }}";
-      const table = document.getElementById("linechart-data");
+      const table = document.getElementById("horizontalbarchart-data");
       const newRow = table.insertRow(-1);
       newRow.innerHTML = ` <td>
             <input type="text" pattern="${uuidPattern}" class="form-control" name="channel"
@@ -276,5 +288,33 @@ <h5>Data Source</h5>
       const row = button.parentNode.parentNode;
       row.parentNode.removeChild(row);
     }
+
+    function resetTable() {
+      const table = document.getElementById("horizontalbarchart-data");
+      table.innerHTML = ` <thead>
+        <tr>
+          <th scope="col">Channel</th>
+          <th scope="col">Thing</th>
+          <th scope="col"></th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>
+            <input type="text" pattern="{{ .UUIDPattern }}" class="form-control" name="channel"
+              placeholder="channel ID" required  />
+          </td>
+          <td>
+            <input type="text" pattern="{{ .UUIDPattern }}" class="form-control" name="thing"
+              placeholder="thing ID" required  />
+          </td>
+          <td class="text-center">
+            <button type="button" class="btn btn-sm" onclick="removeRow(this)">
+              <i class="fas fa-trash-alt"></i>
+            </button>
+          </td>
+        </tr>
+      </tbody>`;
+    }
   </script>
 {{ end }}