diff --git a/ui/web/static/js/charts.js b/ui/web/static/js/charts.js
index ec438159..2b55ad99 100644
--- a/ui/web/static/js/charts.js
+++ b/ui/web/static/js/charts.js
@@ -799,18 +799,19 @@ class TimeSeriesLineChart extends Echart {
         left: 'center',
         show: true
       },
+      tooltip: {
+        trigger: 'axis',
+      },
       xAxis: {
         type: 'category',
-        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
         name: '${this.chartData.xAxisLabel}',
-        nameLocation: 'middle',
-        nameGap: 35
+        min: '${new Date(this.chartData.startTime)}',
+        max: '${new Date(this.chartData.stopTime)}',
       },
       yAxis: {
         type: 'value',
         name: '${this.chartData.yAxisLabel}',
         nameLocation: 'middle',
-        nameGap: 35
       },
       legend: {
         show: true,
@@ -818,10 +819,10 @@ class TimeSeriesLineChart extends Echart {
       },
       series: [
         {
-          data: [150, 230, 224, 218, 135, 147, 260],
+          data: [],
           type: 'line',
           lineStyle: {
-            width: '${this.chartData.lineWidth}',
+            width: ${this.chartData.lineWidth},
             type: 'solid',
             color: '${this.chartData.lineColor}'
           },
@@ -830,7 +831,83 @@ class TimeSeriesLineChart extends Echart {
       ]
     };
 
-    lineChart.setOption(option);`;
+    lineChart.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:'${this.chartData.updateInterval}',
+    };
+    getData(lineChart,chartdata);
+  
+    async function getData(linechart,chartData) {
+      try {
+        const response = await fetch(
+          "${pathPrefix}/data?channel=" + chartData.channel +
+            "&publisher=" + chartData.publisher +
+            "&name=" + chartData.name +
+            "&from=" + chartData.from +
+            "&to=" + chartData.to +
+            "&aggregation=" + chartData.aggregation +
+            "&limit=" + chartData.limit +
+            "&interval=" + chartData.interval,
+        );
+        if (response.ok) {
+          const data = await response.json();
+          const xAxisArray = [];
+          const yAxisArray = [];
+          let currentTimestamp = chartData.from;
+          let previousTimestamp;
+          const endTimestamp = chartData.to;
+          const intervalNum = 3600;
+          while (currentTimestamp <= endTimestamp) {
+            let messageIndex = data.messages.length - 1;
+            let isempty= true;
+            while (messageIndex >= 0 && (data.messages[messageIndex].time) >= previousTimestamp) {
+              const item = data.messages[messageIndex];
+              if ((item.time) <= currentTimestamp) {
+                const date = new Date(item.time);
+                xAxisArray.push(date.toLocaleTimeString());
+                yAxisArray.push(item.value);
+                isempty=false;
+              }
+              messageIndex--;
+            }
+            if (isempty) {
+              const date = new Date(currentTimestamp);
+              xAxisArray.push(date.toLocaleTimeString());
+              yAxisArray.push("-");
+            }
+            previousTimestamp = currentTimestamp;
+            currentTimestamp += intervalNum * 1e3;
+          }
+          linechart.setOption({
+            xAxis: {
+              data: xAxisArray,
+            },
+            series: [
+              {
+                data: yAxisArray,
+              },
+            ],
+          });
+        } else {
+          // Handle errors
+          console.error("HTTP request failed with status:", response.status);
+        }
+      } catch (error) {
+        // Handle fetch or other errors
+        console.error("Error:", error);
+        // Retry after a couple of seconds
+        setTimeout(function () {
+          getData(linechart, chartData);
+        }, 20000);
+      }
+    }`;
   }
 }
 
diff --git a/ui/web/templates/charts/linechartmodal.html b/ui/web/templates/charts/linechartmodal.html
index 1b1fcf95..63f2df96 100644
--- a/ui/web/templates/charts/linechartmodal.html
+++ b/ui/web/templates/charts/linechartmodal.html
@@ -122,6 +122,17 @@ <h5 class="modal-title" id="lineChartModalLabel">Time Series Line Chart</h5>
                     required
                   />
                 </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">
+                    <option value="">Select an aggregation type</option>
+                    <option value="MAX">Maximum</option>
+                    <option value="MIN">Minimum</option>
+                    <option value="SUM">Sum</option>
+                    <option value="COUNT">Count</option>
+                    <option value="AVG">Average</option>
+                  </select>
+                </div>
                 <div class="mb-3">
                   <label for="update-interval" class="form-label">Update interval</label>
                   <input
@@ -131,20 +142,8 @@ <h5 class="modal-title" id="lineChartModalLabel">Time Series Line Chart</h5>
                     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">
-                    <option value="" disabled>Select an aggregation type</option>
-                    <option value="MAX">Maximum</option>
-                    <option value="MIN">Minimum</option>
-                    <option value="SUM">Sum</option>
-                    <option value="COUNT">Count</option>
-                    <option value="AVG">Average</option>
-                  </select>
+                  <div class="invalid-feedback invalid-interval">Please enter a valid interval</div>
                 </div>
               </div>
               <!-- Appearance Tab -->
@@ -241,20 +240,42 @@ <h5 class="modal-title" id="lineChartModalLabel">Time Series Line Chart</h5>
       }
 
       // Create an object to store the form data
-      let chartData = {};
+      const 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();
+        } else {
+          chartData[pair[0]] = pair[1];
+        }
       }
 
+      if (chartData.aggregationType != "") {
+        const updateInterval = form.querySelector("#update-interval");
+        if (chartData.updateInterval === "") {
+          form.querySelector(".invalid-interval").innerHTML = "Please enter an Interval";
+          updateInterval.classList.remove("was-validated");
+          updateInterval.classList.add("is-invalid");
+          return;
+        } else {
+          form.querySelector(".invalid-interval").innerHTML = "";
+          updateInterval.classList.remove("is-invalid");
+          updateInterval.classList.add("was-validated");
+        }
+      }
+      const invalidTimeFeedback = form.querySelector(".invalid-time");
+      const invalidTimeInput = form.querySelector("#stop-time");
       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;
+      } else {
+        invalidTimeFeedback.innerHTML = "";
+        invalidTimeInput.classList.remove("is-invalid");
+        invalidTimeInput.classList.add("was-validated");
       }
 
       var widgetID = "lineChart-" + Date.now();