From 0b5beacbd6dd73a38901dd2e4d28dec6181bffdc Mon Sep 17 00:00:00 2001
From: ianmuchyri <ianmuchiri8@gmail.com>
Date: Sun, 17 Mar 2024 15:10:15 +0300
Subject: [PATCH] initial version of stackedlinechart

Signed-off-by: ianmuchyri <ianmuchiri8@gmail.com>
---
 ui/web/static/js/charts.js                    | 547 +++++++++++-------
 ui/web/templates/charts/linechartmodal.html   |   4 +-
 .../charts/stackedlinechartmodal.html         | 280 ++++++---
 3 files changed, 524 insertions(+), 307 deletions(-)

diff --git a/ui/web/static/js/charts.js b/ui/web/static/js/charts.js
index 2d4c0fe1..cb54e2c0 100644
--- a/ui/web/static/js/charts.js
+++ b/ui/web/static/js/charts.js
@@ -796,171 +796,171 @@ class TimeSeriesLineChart extends Echart {
     const names = JSON.stringify(this.chartData.seriesNames);
     const colors = JSON.stringify(this.chartData.colors);
     return `
-    var lineChart = echarts.init(document.getElementById("${this.ID}")); 
-    var option = {
-      title: {
-        text: '${this.chartData.title}',
-        left: 'center',
-        show: true
-      },
-      tooltip: {
-        trigger: 'axis',
-      },
-      xAxis: {
-        type: 'category',
-        name: '${this.chartData.xAxisLabel}',
-        min: '${new Date(this.chartData.startTime)}',
-        max: '${new Date(this.chartData.stopTime)}',
-      },
-      yAxis: {
-        type: 'value',
-        name: '${this.chartData.yAxisLabel}',
-        nameLocation: 'middle',
-      },
-      legend: {
-        show: true,
-      },
-      series: [
-        {
-          data: [],
-          type: 'line',
-          lineStyle: {
-            width: ${this.chartData.lineWidth},
-            type: 'solid',
-          },
-        }
-      ]
-    };
+      var lineChart = echarts.init(document.getElementById("${this.ID}")); 
+      var option = {
+        title: {
+          text: '${this.chartData.title}',
+          left: 'center',
+          show: true
+        },
+        tooltip: {
+          trigger: 'axis',
+        },
+        xAxis: {
+          type: 'category',
+          name: '${this.chartData.xAxisLabel}',
+          min: '${new Date(this.chartData.startTime)}',
+          max: '${new Date(this.chartData.stopTime)}',
+        },
+        yAxis: {
+          type: 'value',
+          name: '${this.chartData.yAxisLabel}',
+          nameLocation: 'middle',
+        },
+        legend: {
+          show: true,
+        },
+        series: [
+          {
+            data: [],
+            type: 'line',
+            lineStyle: {
+              width: ${this.chartData.lineWidth},
+              type: 'solid',
+            },
+          }
+        ]
+      };
 
-    lineChart.setOption(option);
-    var chartdata = {
-      channels:${channels},
-      publishers:${things},
-      names:${names},
-      colors:${colors},
-      valueName: '${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 {
-        let xAxisArray=[];
-        const yAxisArray = [];
-        let currentTimestamp = chartData.from;
-        let previousTimestamp=0;
-        const endTimestamp = chartData.to;
-        const timeDifference = chartData.to - chartData.from;
-        let intervalNum;
-        switch (true) {
-          case (timeDifference <= 3.6*1e6):
-            intervalNum = 6*1e5;
-            break;
-          case (timeDifference <= 8.64 * 1e7):
-            intervalNum = 6*1e6;
-            break;
-          case (timeDifference <= 6.05 * 1e8):
-            intervalNum = 6*1e7;
-            break;
-          case (timeDifference <= 2.63 * 1e9):
-            intervalNum = 6*1e8;
-            break;
-          case (timeDifference <= 3.16 * 1e10):
-            intervalNum = 6*1e9;
-            break;
-          default:
-            intervalNum = 6*1e8;
-            break;
-        }
+      lineChart.setOption(option);
+      var chartdata = {
+        channels:${channels},
+        publishers:${things},
+        names:${names},
+        colors:${colors},
+        valueName: '${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 {
+          let xAxisArray=[];
+          const yAxisArray = [];
+          let currentTimestamp = chartData.from;
+          let previousTimestamp=0;
+          const endTimestamp = chartData.to;
+          const timeDifference = chartData.to - chartData.from;
+          let intervalNum;
+          switch (true) {
+            case (timeDifference <= 3.6*1e6):
+              intervalNum = 6*1e5;
+              break;
+            case (timeDifference <= 8.64 * 1e7):
+              intervalNum = 6*1e6;
+              break;
+            case (timeDifference <= 6.05 * 1e8):
+              intervalNum = 6*1e7;
+              break;
+            case (timeDifference <= 2.63 * 1e9):
+              intervalNum = 6*1e8;
+              break;
+            case (timeDifference <= 3.16 * 1e10):
+              intervalNum = 6*1e9;
+              break;
+            default:
+              intervalNum = 6*1e8;
+              break;
+          }
 
-        const initialXAxisArray = []
-        const NoOfValues = Math.ceil(timeDifference/intervalNum);
-        for (i=0; i<=NoOfValues; i++) {
-          initialXAxisArray.push(currentTimestamp);
-          currentTimestamp += intervalNum;
-        }
-        xAxisArray.push(initialXAxisArray);
-
-        for (i=0; i < chartData.channels.length; i++) {
-          const url = "${pathPrefix}/data?channel=" + chartData.channels[i] +
-          "&publisher=" + chartData.publishers[i] +
-          "&name=" + chartData.valueName +
-          "&from=" + chartData.from +
-          "&to=" + chartData.to +
-          "&aggregation=" + chartData.aggregation +
-          "&limit=" + chartData.limit +
-          "&interval=" + chartData.interval;
-          const response = await fetch(url);
-          if (response.ok) {
-            const data = await response.json();
-            const xAxis=[];
-            const yAxis=[];
-            if (data.messages){
-              const currArray = xAxisArray[xAxisArray.length-1];
-              let currentTime, previousTime;
-              for (j=0; j < currArray.length; j++) {
-                let isempty = true;
-                let currentTime = currArray[j];
-                for (k = (data.messages.length -1); k>= 0 ; k--) {
-                  const item = data.messages[k];
-                  if (item.time > previousTime && item.time <= currentTime ) {
-                    xAxis.push(item.time);
-                    yAxis.push(item.value);
-                    isEmpty= false;
+          const initialXAxisArray = []
+          const NoOfValues = Math.ceil(timeDifference/intervalNum);
+          for (i=0; i<=NoOfValues; i++) {
+            initialXAxisArray.push(currentTimestamp);
+            currentTimestamp += intervalNum;
+          }
+          xAxisArray.push(initialXAxisArray);
+
+          for (i=0; i < chartData.channels.length; i++) {
+            const url = "${pathPrefix}/data?channel=" + chartData.channels[i] +
+            "&publisher=" + chartData.publishers[i] +
+            "&name=" + chartData.valueName +
+            "&from=" + chartData.from +
+            "&to=" + chartData.to +
+            "&aggregation=" + chartData.aggregation +
+            "&limit=" + chartData.limit +
+            "&interval=" + chartData.interval;
+            const response = await fetch(url);
+            if (response.ok) {
+              const data = await response.json();
+              const xAxis=[];
+              const yAxis=[];
+              if (data.messages){
+                const currArray = xAxisArray[xAxisArray.length-1];
+                let currentTime, previousTime;
+                for (j=0; j < currArray.length; j++) {
+                  let isempty = true;
+                  let currentTime = currArray[j];
+                  for (k = (data.messages.length -1); k>= 0 ; k--) {
+                    const item = data.messages[k];
+                    if (item.time > previousTime && item.time <= currentTime ) {
+                      xAxis.push(item.time);
+                      yAxis.push(item.value);
+                      isEmpty= false;
+                    }
                   }
+                  if (isempty) {
+                    xAxis.push(currentTime);
+                    yAxis.push("-");
+                  }
+                  previousTime=currentTime;
                 }
-                if (isempty) {
-                  xAxis.push(currentTime);
-                  yAxis.push("-");
-                }
-                previousTime=currentTime;
               }
+              xAxisArray.push(xAxis);
+              // Remove the previous element in the array
+              xAxisArray.shift();
+              yAxisArray.push(yAxis);
+            } else {
+              // Handle errors
+              console.error("HTTP request failed with status:", response.status);
             }
-            xAxisArray.push(xAxis);
-            // Remove the previous element in the array
-            xAxisArray.shift();
-            yAxisArray.push(yAxis);
-          } else {
-            // Handle errors
-            console.error("HTTP request failed with status:", response.status);
           }
-        }
 
-        const xAxisData=[];
-        xAxisArray[xAxisArray.length-1].forEach((element) => {
-          const date = new Date(element);
-          xAxisData.push(date);
-        })
-        const seriesData = []
-        for (i=0; i<yAxisArray.length; i++) {
-          const data = {
-            data: yAxisArray[i],
-            type: 'line',
-            lineStyle: {
-              color: chartData.colors[i],
-            },
-            name: chartData.names[i],
-          };
-          seriesData.push(data);
-        }
-        linechart.setOption({
-            xAxis: {
-              data: xAxisData,
-            },
-            series: seriesData,
-          });
-
-      } catch (error) {
-          // Handle fetch or other errors
-          console.error("Error:", error);
-          // Retry after a couple of seconds
-          setTimeout(function () {
-            getData(linechart, chartData);
-          }, 20000);
+          const xAxisData=[];
+          xAxisArray[xAxisArray.length-1].forEach((element) => {
+            const date = new Date(element);
+            xAxisData.push(date);
+          })
+          const seriesData = []
+          for (i=0; i<yAxisArray.length; i++) {
+            const data = {
+              data: yAxisArray[i],
+              type: 'line',
+              lineStyle: {
+                color: chartData.colors[i],
+              },
+              name: chartData.names[i],
+            };
+            seriesData.push(data);
+          }
+          linechart.setOption({
+              xAxis: {
+                data: xAxisData,
+              },
+              series: seriesData,
+            });
+
+        } catch (error) {
+            // Handle fetch or other errors
+            console.error("Error:", error);
+            // Retry after a couple of seconds
+            setTimeout(function () {
+              getData(linechart, chartData);
+            }, 20000);
         }
       };
     `;
@@ -1559,69 +1559,188 @@ class StackedLineChart extends Echart {
   }
 
   #generateScript() {
-    let seriesName = this.chartData.seriesName.split(",");
+    const channels = JSON.stringify(this.chartData.channels);
+    const things = JSON.stringify(this.chartData.things);
+    const names = JSON.stringify(this.chartData.seriesNames);
+    const colors = JSON.stringify(this.chartData.colors);
     return `
-    var stackedLineChart = echarts.init(document.getElementById("${this.ID}"));
-    var option = {
-        title: {
-          text: "${this.chartData.title}",
-          left: 'left',
-        },
-        tooltip: {
-          trigger: 'axis'
-        },
-        legend: {
-          data: ['${seriesName[0]}', '${seriesName[1]}', '${seriesName[2]}'],
-          left: 'right',
-        },
-        grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          containLabel: true
-        },
-        toolbox: {
-          feature: {
-            saveAsImage: {}
-          }
-        },
-        xAxis: {
-          type: 'category',
-          boundaryGap: false,
-          data: ['Thing1', 'Thing2', 'Thing3', 'Thing4', 'Thing5', 'Thing6', 'Thing7'],
-          name: '${this.chartData.xAxisLabel}',
-          nameLocation: 'middle',
-          nameGap: 35,
-        },
-        yAxis: {
-          type: 'value',
-          name: '${this.chartData.yAxisLabel}',
-          nameLocation: 'middle',
-          nameGap: 35,
-        },
-        series: [
-          {
-            name: '${seriesName[0]}',
-            type: 'line',
-            stack: 'Total',
-            data: [120, 132, 101, 134, 90, 230, 210]
+      var stackedLineChart = echarts.init(document.getElementById("${this.ID}"));
+      let legendData =[];
+      ${names}.forEach((element) => {
+        legendData.push(element);
+      });
+      var option = {
+          title: {
+            text: "${this.chartData.title}",
+            left: 'left',
           },
-          {
-            name: '${seriesName[1]}',
-            type: 'line',
-            stack: 'Total',
-            data: [220, 182, 191, 234, 290, 330, 310]
+          tooltip: {
+            trigger: 'axis'
           },
-          {
-            name: '${seriesName[2]}',
-            type: 'line',
-            stack: 'Total',
-            data: [150, 232, 201, 154, 190, 330, 410]
+          legend: {
+            data: legendData,
           },
-        ]
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            name: '${this.chartData.xAxisLabel}',
+
+          },
+          yAxis: {
+            type: 'value',
+            name: '${this.chartData.yAxisLabel}',
+          },
+          series: [
+            {
+              data: [],
+              type: 'line',
+              stack: 'Total',
+              lineStyle: {
+                width: ${this.chartData.lineWidth},
+                type: 'solid',
+              },
+            }
+          ]
+        }
+
+      stackedLineChart.setOption(option);
+      var chartdata = {
+        channels:${channels},
+        publishers:${things},
+        names:${names},
+        colors:${colors},
+        valueName: '${this.chartData.valueName}',
+        from:${this.chartData.startTime},
+        to:${this.chartData.stopTime},
+        aggregation:'${this.chartData.aggregationType}',
+        limit:100,
+        interval:'${this.chartData.updateInterval}',
       };
+      getData(stackedLineChart,chartdata);
+      async function getData(stackedLineChart,chartData) {
+        try {
+          let xAxisArray=[];
+          const yAxisArray = [];
+          let currentTimestamp = chartData.from;
+          let previousTimestamp=0;
+          const endTimestamp = chartData.to;
+          const timeDifference = chartData.to - chartData.from;
+          let intervalNum;
+          switch (true) {
+            case (timeDifference <= 3.6*1e6):
+              intervalNum = 6*1e5;
+              break;
+            case (timeDifference <= 8.64 * 1e7):
+              intervalNum = 6*1e6;
+              break;
+            case (timeDifference <= 6.05 * 1e8):
+              intervalNum = 6*1e7;
+              break;
+            case (timeDifference <= 2.63 * 1e9):
+              intervalNum = 6*1e8;
+              break;
+            case (timeDifference <= 3.16 * 1e10):
+              intervalNum = 6*1e9;
+              break;
+            default:
+              intervalNum = 6*1e8;
+              break;
+          }
 
-    stackedLineChart.setOption(option);`;
+          const initialXAxisArray = []
+          const NoOfValues = Math.ceil(timeDifference/intervalNum);
+          for (i=0; i<=NoOfValues; i++) {
+            initialXAxisArray.push(currentTimestamp);
+            currentTimestamp += intervalNum;
+          }
+          xAxisArray.push(initialXAxisArray);
+
+          for (i=0; i < chartData.channels.length; i++) {
+            const url = "${pathPrefix}/data?channel=" + chartData.channels[i] +
+            "&publisher=" + chartData.publishers[i] +
+            "&name=" + chartData.valueName +
+            "&from=" + chartData.from +
+            "&to=" + chartData.to +
+            "&aggregation=" + chartData.aggregation +
+            "&limit=" + chartData.limit +
+            "&interval=" + chartData.interval;
+            const response = await fetch(url);
+            if (response.ok) {
+              const data = await response.json();
+              const xAxis=[];
+              const yAxis=[];
+              if (data.messages){
+                const currArray = xAxisArray[xAxisArray.length-1];
+                let currentTime, previousTime;
+                for (j=0; j < currArray.length; j++) {
+                  let isempty = true;
+                  let currentTime = currArray[j];
+                  for (k = (data.messages.length -1); k>= 0 ; k--) {
+                    const item = data.messages[k];
+                    if (item.time > previousTime && item.time <= currentTime ) {
+                      xAxis.push(item.time);
+                      yAxis.push(item.value);
+                      isEmpty= false;
+                    }
+                  }
+                  if (isempty) {
+                    xAxis.push(currentTime);
+                    yAxis.push("-");
+                  }
+                  previousTime=currentTime;
+                }
+              }
+              xAxisArray.push(xAxis);
+              // Remove the previous element in the array
+              xAxisArray.shift();
+              yAxisArray.push(yAxis);
+            } else {
+              // Handle errors
+              console.error("HTTP request failed with status:", response.status);
+            }
+          }
+
+          const xAxisData=[];
+          xAxisArray[xAxisArray.length-1].forEach((element) => {
+            const date = new Date(element);
+            xAxisData.push(date);
+          })
+          const seriesData = []
+          for (i=0; i<yAxisArray.length; i++) {
+            const data = {
+              data: yAxisArray[i],
+              type: 'line',
+              stack: 'Total',
+              lineStyle: {
+                color: chartData.colors[i],
+              },
+              name: chartData.names[i],
+            };
+            seriesData.push(data);
+          }
+          stackedLineChart.setOption({
+              xAxis: {
+                data: xAxisData,
+              },
+              series: seriesData,
+            });
+
+        } catch (error) {
+            // Handle fetch or other errors
+            console.error("Error:", error);
+            // Retry after a couple of seconds
+            setTimeout(function () {
+              getData(stackedLineChart, chartData);
+            }, 20000);
+        }
+      };
+    `;
   }
 }
 
diff --git a/ui/web/templates/charts/linechartmodal.html b/ui/web/templates/charts/linechartmodal.html
index de78a339..9b25e655 100644
--- a/ui/web/templates/charts/linechartmodal.html
+++ b/ui/web/templates/charts/linechartmodal.html
@@ -248,9 +248,8 @@ <h5>Data Source</h5>
     </div>
   </div>
 <script>
-  // line chart form
-  const form = document.getElementById("create-lineChart-form");
   document.getElementById("create-lineChart-button").addEventListener("click", function () {
+    const form = document.getElementById("create-lineChart-form");
     if (!form.checkValidity()) {
       form.classList.add("was-validated");
       return;
@@ -332,6 +331,7 @@ <h5>Data Source</h5>
   });
 
   document.querySelectorAll(".close-lineChart-button").forEach((element) => {
+    const form = document.getElementById("create-lineChart-form");
     element.addEventListener("click", function () {
       form.querySelector(".invalid-time").innerHTML = "";
       form.querySelector("#stop-time").classList.remove("is-invalid");
diff --git a/ui/web/templates/charts/stackedlinechartmodal.html b/ui/web/templates/charts/stackedlinechartmodal.html
index 1d4bc3cf..62b6e3df 100644
--- a/ui/web/templates/charts/stackedlinechartmodal.html
+++ b/ui/web/templates/charts/stackedlinechartmodal.html
@@ -17,7 +17,7 @@
           <h5 class="modal-title" id="stackedLineChartModalLabel">Stacked Line Charts</h5>
           <button
             type="button"
-            class="btn-close"
+            class="btn-close close-stackedLineChart-button"
             data-bs-dismiss="modal"
             aria-label="Close"
           ></button>
@@ -54,7 +54,6 @@ <h5 class="modal-title" id="stackedLineChartModalLabel">Stacked Line Charts</h5>
               </button>
             </li>
           </ul>
-          <!-- Single Form for both Data and Appearance Tabs -->
           <form id="create-stackedLineChart-form">
             <div class="tab-content" id="myTabContent">
               <!-- Data Tab -->
@@ -64,31 +63,63 @@ <h5 class="modal-title" id="stackedLineChartModalLabel">Stacked Line Charts</h5>
                 role="tabpanel"
                 aria-labelledby="data-tab"
               >
-                <div class="mb-3">
-                  <label for="channel-id" class="form-label">Channel ID</label>
-                  <input
-                    type="text"
-                    pattern="{{ .UUIDPattern }}"
-                    class="form-control mb-3"
-                    name="channel"
-                    id="channel-id"
-                    placeholder="Enter the channel ID"
-                    required
-                  />
-                  <div class="invalid-feedback">Please enter a valid uuid</div>
-                </div>
-                <div class="mb-3">
-                  <label for="thing-id" class="form-label">Thing ID</label>
-                  <input
-                    type="text"
-                    pattern="{{ .UUIDPattern }}"
-                    class="form-control mb-3"
-                    name="thing"
-                    id="thing-id"
-                    placeholder="Enter the thing ID"
-                    required
-                  />
-                  <div class="invalid-feedback">Please enter a valid uuid</div>
+                <div class="table-responsive-md mb-3 p-2 border rounded">
+                  <h5>Data Source</h5>
+                  <table class="table" id="stackedLineChart-data">
+                    <thead>
+                      <tr>
+                        <th scope="col">Channel</th>
+                        <th scope="col">Thing</th>
+                        <th scope="col">Value</th>
+                        <th scope="col">Color</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>
+                          <input
+                            type="text"
+                            class="form-control"
+                            name="seriesName"
+                            placeholder="series name"
+                            required
+                          />
+                        </td>
+                        <td>
+                          <input type="color" class="form-control" name="lineColor" />
+                        </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="value-name" class="form-label">Value name</label>
@@ -122,6 +153,17 @@ <h5 class="modal-title" id="stackedLineChartModalLabel">Stacked Line Charts</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 +173,8 @@ <h5 class="modal-title" id="stackedLineChartModalLabel">Stacked Line Charts</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 -->
@@ -184,16 +214,6 @@ <h5 class="modal-title" id="stackedLineChartModalLabel">Stacked Line Charts</h5>
                     placeholder="Enter the x axis label"
                   />
                 </div>
-                <div class="mb-3">
-                  <label for="series-name" class="form-label">Series name</label>
-                  <input
-                    type="text"
-                    class="form-control mb-3"
-                    name="seriesName"
-                    id="series-name"
-                    placeholder="Enter the series name eg. temperature, voltage"
-                  />
-                </div>
                 <div class="mb-3">
                   <label for="line-width" class="form-label">Line width</label>
                   <select class="form-select mb-3" name="lineWidth" id="line-width">
@@ -214,8 +234,7 @@ <h5 class="modal-title" id="stackedLineChartModalLabel">Stacked Line Charts</h5>
         <div class="modal-footer">
           <button
             type="button"
-            class="btn btn-secondary"
-            id="close-stackedLineChart-button"
+            class="btn btn-secondary close-stackedLineChart-button"
             data-bs-dismiss="modal"
           >
             Close
@@ -228,50 +247,129 @@ <h5 class="modal-title" id="stackedLineChartModalLabel">Stacked Line Charts</h5>
     </div>
   </div>
   <script>
-    // Stacked line chart form
-    document
-      .getElementById("create-stackedLineChart-button")
-      .addEventListener("click", function () {
-        const form = document.getElementById("create-stackedLineChart-form");
-        if (!form.checkValidity()) {
-          form.classList.add("was-validated");
-          return;
-        }
-
-        // Create an object to store the form data
-        let chartData = {};
-        let formData = new FormData(form);
-        for (var pair of formData.entries()) {
-          chartData[pair[0]] = pair[1];
+    document.getElementById("create-stackedLineChart-button").addEventListener("click", function () {
+      const form = document.getElementById("create-stackedLineChart-form");
+      if (!form.checkValidity()) {
+        form.classList.add("was-validated");
+        return;
+      }
+      // Create an object to store the form data
+      const chartData = {};
+      const channels = [];
+      const things = [];
+      const names = [];
+      const colors = [];
+      let formData = new FormData(form);
+      for (let [name, value] of formData) {
+        switch (name) {
+          case "startTime":
+          case "stopTime":
+            const inputDate = new Date(value);
+            chartData[name] = inputDate.getTime();
+            break;
+          case "channel":
+            channels.push(value);
+            break;
+          case "thing":
+            things.push(value);
+            break;
+          case "seriesName":
+            names.push(value);
+            break;
+          case "lineColor":
+            colors.push(value);
+            break;
+          default:
+          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");
+      }
+  
+      chartData["channels"] = channels;
+      chartData["things"] = things;
+      chartData["seriesNames"]= names;
+      chartData["colors"]=colors;
+  
+      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");
         }
-
-        var widgetID = "stackedLineChart-" + Date.now();
-
-        chartData["Type"] = "stackedLineChart";
-        addWidget(chartData, widgetID);
-        metadataBuffer[widgetID] = chartData;
-
-        form.reset();
-        form.classList.remove("was-validated");
-        bootstrap.Modal.getInstance(document.getElementById("stackedLineChartModal")).hide();
-      });
-
-    document.getElementById("close-stackedLineChart-button").addEventListener("click", function () {
-      const form = document.getElementById("create-stackedLineChart-form");
-      form.querySelector(".invalid-time").innerHTML = "";
-      form.querySelector("#stop-time").classList.remove("is-invalid");
+      }
+      const invalidTimeFeedback = form.querySelector(".invalid-time");
+      const invalidTimeInput = form.querySelector("#stop-time");
+      if (chartData.stopTime <= chartData.startTime) {
+        invalidTimeFeedback.innerHTML = "Stop time should be greater than start time";
+        invalidTimeFeedback.style.color = "red";
+        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 = "stackedLineChart-" + Date.now();
+  
+      chartData["Type"] = "stackedLineChart";
+      addWidget(chartData, widgetID);
+      metadataBuffer[widgetID] = chartData;
+  
       form.reset();
       form.classList.remove("was-validated");
+      bootstrap.Modal.getInstance(document.getElementById("stackedLineChartModal")).hide();
+  
+    });
+  
+    document.querySelectorAll(".close-stackedLineChart-button").forEach((element) => {
+      const form = document.getElementById("create-stackedLineChart-form");
+      element.addEventListener("click", function () {
+        form.querySelector(".invalid-time").innerHTML = "";
+        form.querySelector("#stop-time").classList.remove("is-invalid");
+        form.reset();
+        form.classList.remove("was-validated");
+      })
     });
+  
+    function addRow() {
+      const uuidPattern = "{{ .UUIDPattern }}";
+      const table = document
+        .getElementById("stackedLineChart-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>
+            <input type="text" class="form-control" name="seriesName"
+              placeholder="series name" required />
+          </td>
+          <td>
+            <input type="color" class="form-control" name="lineColor" />
+          </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 }}