diff --git a/main.html b/main.html
index f82668f..2c2d087 100644
--- a/main.html
+++ b/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,13 +91,30 @@
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) {
+// 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() {
@@ -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);
}
@@ -171,55 +258,7 @@