Form data is being displayed.o

main.html

@@ -31,8 +31,59 @@
       form.addEventListener("submit", processForm);
    }
    */
+   Chart.defaults.font.size = 20;
+   function createChart(data, videotitle) {
+      var chrt = document.getElementById("chartId").getContext("2d");
+      var chartId = new Chart(chrt, {
+         type: 'radar',
+         data: {
+            labels: Array.from(data.keys()),
+            datasets: [{
+               label: videotitle,
+               data: Array.from(data.values()),
+               backgroundColor: "rgba(128,128,128,0.5)",
+               pointBackgroundColor: ['yellow', 'aqua', 'pink', 'lightgreen', 'lightblue', 'gold', 'maroon'],
+               borderColor: ['black'],
+               borderWidth: 1,
+               pointRadius: 6,
+            }],
+         },
+         options: {
+            scales: {
+               r: {
+                  angleLines: {
+                     display: true
+                     },
+                  min: 0,
+                  max: 4,
+                  ticks: {
+                  // forces step size to be 50 units
+                     stepSize: 1,
+                     font: {
+                        size: 20
+                     }
+                  }
+                  }
+            },
+            responsive: false,
+            elements: {
+               line: {
+                  borderWidth: 3
+               }
+            }
+         },
+         plugins: {
+            legend: {
+                labels: {
+                    // This more specific font property overrides the global property
+                    fontSize: 20
+                }
+            }
+         }
+      });
 
-
+      return chartId;
+   };
 
 
    let data = new Map();
@@ -40,14 +91,31 @@
    data.set("visibility", 2); // visibility / audio
    data.set("segmentation", 3); // segmentation
    data.set("activity", 4); // activity
-   data.set("interactivity", 5); // interactivity
+   data.set("interactivity", 4); // interactivity
    data.set("dynamic drawing", 3); // dynamic drawing
    data.set("translatability", 2); // translatability
 
    function loadNewRadarChart(chartId, data, videotitle) {
-      chartId.update();
+//       let removalIndex = chartId.data.datasets.indexOf(ds1); //Locate index of ds1
+      let removalIndex = 0;
+      if(removalIndex >= 0) { //make sure this element exists in the array
+         chartId.data.datasets.splice(removalIndex, 1);
       }
 
+//       chartId.data.labels.push(Array.from(data.keys()));
+      chartId.data.datasets =[{
+               label: videotitle,
+               data: Array.from(data.values()),
+               backgroundColor: "rgba(128,128,128,0.5)",
+               pointBackgroundColor: ['yellow', 'aqua', 'pink', 'lightgreen', 'lightblue', 'gold', 'maroon'],
+               borderColor: ['black'],
+               borderWidth: 1,
+               pointRadius: 6,
+            }];
+      chartId.update();
+
+   };
+
    function setNewValues() {
 
       console.log("Hi!");
@@ -55,7 +123,26 @@
       let nameValue = document.getElementById("videoname").value;
       console.log(nameValue);
 
-      loadNewRadarChart(chartId, data, nameValue);
+      data_ins = parseInt(document.getElementById("ins_sel").value);
+      data.set("instructional principle", data_ins);
+      data_vis = parseInt(document.getElementById("vis_sel").value);
+      data.set("visibility", data_vis);
+      data_seg = parseInt(document.getElementById("seg_sel").value);
+      data.set("segmentation", data_seg);
+      data_act = parseInt(document.getElementById("act_sel").value);
+      data.set("activity", data_act);
+      data_int = parseInt(document.getElementById("int_sel").value);
+      data.set("interactivity", data_int);
+      data_dyn = parseInt(document.getElementById("dyn_sel").value);
+      data.set("dynamic drawing", data_dyn);
+      data_tra = parseInt(document.getElementById("tra_sel").value);
+      data.set("translatability", data_tra);
+
+
+      console.log(data);
+
+
+      loadNewRadarChart(chartHandleId, data, nameValue);
    }
    </script>
 </head>
@@ -171,55 +258,7 @@
    <canvas id="chartId" aria-label="chart" height="500" width="700"></canvas>
 
    <script>
-      Chart.defaults.font.size = 20;
+      let chartHandleId = createChart(data, "title");
-      var chrt = document.getElementById("chartId").getContext("2d");
-      var chartId = new Chart(chrt, {
-         type: 'radar',
-         data: {
-            labels: Array.from(data.keys()),
-            datasets: [{
-               label: "Title of video",
-               data: Array.from(data.values()),
-               backgroundColor: "rgba(128,128,128,0.5)",
-               pointBackgroundColor: ['yellow', 'aqua', 'pink', 'lightgreen', 'lightblue', 'gold', 'maroon'],
-               borderColor: ['black'],
-               borderWidth: 1,
-               pointRadius: 6,
-            }],
-         },
-         options: {
-            scales: {
-               r: {
-                  angleLines: {
-                     display: true
-                     },
-                  min: 0,
-                  max: 5,
-                  ticks: {
-                  // forces step size to be 50 units
-                     stepSize: 1,
-                     font: {
-                        size: 20
-                     }
-                  }
-                  }
-            },
-            responsive: false,
-            elements: {
-               line: {
-                  borderWidth: 3
-               }
-            }
-         },
-         plugins: {
-            legend: {
-                labels: {
-                    // This more specific font property overrides the global property
-                    fontSize: 20
-                }
-            }
-         }
-      });
 
    </script>
 </body>