mputzlocher/videoTax
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Form data is being displayed.o

Browse Source
This commit is contained in:
Martin Putzlocher 2023-04-03 12:26:10 +02:00
parent 50b098d606
commit 3b9d1a83cc
1 changed files with 92 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
main.html
View File

@ -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;
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
}
}
}
});
let chartHandleId = createChart(data, "title");
</script>
</body>