fix: enable multiple bar charts

Signed-off-by: 1998-felix <felix.gateru@gmail.com>
absmach · Mar 13, 2024 · 90fb2ea · 90fb2ea
1 parent b7200d9
commit 90fb2ea
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 18 deletions.
diff --git a/ui/web/static/js/charts.js b/ui/web/static/js/charts.js
@@ -245,14 +245,15 @@ class TimeSeriesBarChart extends Echart {
       channel: '${this.chartData.channel}',
       publisher: '${this.chartData.thing}',
       name: '${this.chartData.valueName}',
-      from: ${this.chartData.startTime / 1000},
-      to: ${this.chartData.stopTime / 1000},
+      from: ${this.chartData.startTime},
+      to: ${this.chartData.stopTime},
       aggregation: '${this.chartData.aggregationType}',
       limit: 100,
       interval : '${this.chartData.updateInterval}'
     }
+    getData(barChart, chartData);
 
-   async function fetchDataAndUpdate() {
+    async function getData(barChart, chartData) {
         try {
           const apiEndpoint = "/data?channel=" + chartData.channel +
           "&publisher=" + chartData.publisher +
@@ -264,33 +265,34 @@ class TimeSeriesBarChart extends Echart {
           "&interval=" + chartData.interval;
 
           const response = await fetch(apiEndpoint);
-  
           if (!response.ok) {
             throw new Error("HTTP request failed with status: " + response.status);
           }
-  
           const data = await response.json();
+          console.log(data);
           const xAxisArray = [];
           const yAxisArray = [];
-
-          data.messages.forEach((message) => {
-            xAxisArray.push(new Date(message.time).toLocaleTimeString());
-            yAxisArray.push(message.value);
-          });
-          updateChart(xAxisArray, yAxisArray);
+          if (data.message != undefined && data.messages.length > 0) {
+            data.messages.forEach((message) => {
+              xAxisArray.push(new Date(message.time).toLocaleTimeString());
+              yAxisArray.push(message.value);
+            });
+          }
+          updateChart(barChart,xAxisArray, yAxisArray);
         } catch (error) {
           console.error("Error fetching data:", error);
-        }
+          setTimeout(function () {
+            getData(barChart, chartData);
+          }, 20000);
+        } 
       }
   
-      function updateChart(xAxisArray, yAxisArray) {
+      function updateChart(barChart, xAxisArray, yAxisArray) {
         const option = barChart.getOption();
-        option.series[0].data = yAxisArray;
-        option.xAxis[0].data = xAxisArray;
+        option.series[0].data = yAxisArray.reverse();
+        option.xAxis[0].data = xAxisArray.reverse();
         barChart.setOption(option);
      }
-
-    fetchDataAndUpdate();
     `;
   }
 }

diff --git a/ui/web/templates/charts/barchartmodal.html b/ui/web/templates/charts/barchartmodal.html
@@ -228,7 +228,7 @@ <h5 class="modal-title" id="barChartModalLabel">Time Series Bar Chart</h5>
       for (var pair of formData.entries()) {
         if (pair[0] === "startTime" || pair[0] === "stopTime") {
           const inputDate = new Date(pair[1]);
-          chartData[pair[0]] = inputDate.getTime();
+          chartData[pair[0]] = inputDate.getTime() * 1e6;
         } else {
           chartData[pair[0]] = pair[1];
         }