From c37406b9907a60089e08a52154f7b22c2b36b091 Mon Sep 17 00:00:00 2001
From: Martin Putzlocher <m.putzlocher@stiftland-gymnasium.de>
Date: Mon, 3 Apr 2023 14:00:06 +0200
Subject: [PATCH] polar area chart instead of radar chart

---
 main.html | 110 +++++++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 100 insertions(+), 10 deletions(-)

diff --git a/main.html b/main.html
index 2c2d087..beb8b84 100644
--- a/main.html
+++ b/main.html
@@ -31,18 +31,66 @@
       form.addEventListener("submit", processForm);
    }
    */
-   Chart.defaults.font.size = 20;
+
+   Chart.defaults.font.size = 12;
+
+
+
+
    function createChart(data, videotitle) {
-      var chrt = document.getElementById("chartId").getContext("2d");
-      var chartId = new Chart(chrt, {
-         type: 'radar',
+      var ctx = document.getElementById("chartId").getContext("2d");
+
+//       const customText = {
+//       id: 'customText',
+//       afterDraw: (chart, args, options) => {
+//     const {
+//       ctx,
+//       canvas
+//     } = chart;
+//     textObjects = options.text;
+//
+//     if (textObjects.length === 0) {
+//       return;
+//     }
+/*
+    textObjects.forEach((textObj) => {
+      ctx.save();
+
+      ctx.textAlign = textObj.textAlign || 'center';
+      ctx.font = `${textObj.size || '20px'} ${textObj.font || 'Arial'}`;
+      ctx.fillStyle = textObj.color || 'black'
+      ctx.fillText(textObj.text, textObj.x, textObj.y)
+
+      ctx.restore();
+    })
+  }
+   }*/
+
+
+      var chartId = new Chart(ctx, {
+         type: 'polarArea',
          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'],
+//                backgroundColor: "rgba(128,128,128,0.5)",
+               backgroundColor:  [
+                  "#f8cc1b90",
+                  "#fa7a4890",
+                  "#31195590",
+                  "#84a2cd90",
+                  "#bed05790",
+                  "#4777cd90",
+                  "#ffa5c890"],
+               pointBackgroundColor: [
+                  "#f8cc1b90",
+                  "#fa7a4890",
+                  "#31195590",
+                  "#84a2cd90",
+                  "#bed05790",
+                  "#4777cd90",
+                  "#ffa5c890"],
                borderColor: ['black'],
                borderWidth: 1,
                pointRadius: 6,
@@ -67,18 +115,45 @@
             },
             responsive: false,
             elements: {
-               line: {
+               arc: {
                   borderWidth: 3
                }
+            },
+            plugins: {
+               title: {
+                display: true,
+                text: 'Custom Chart Title',
+                padding: {
+                    top: 10,
+                    bottom: 30
+                },
+                font: {
+                        size: 20
+                     }
+               }
+//                ,
+//                customText: {
+//                   text: [{
+//                      text: 'Lorem ipsum',
+//                      x: 0,
+//                      y: 0,
+//                      textAlign: 'center',
+//                      size: '30px',
+//                      color: 'black',
+//                      font: 'Arial black'
+//                      }
+//                      ]
+//                }
             }
          },
          plugins: {
             legend: {
                 labels: {
                     // This more specific font property overrides the global property
-                    fontSize: 20
+                    fontSize: 10
                 }
             }
+//          , customText: [customText]
          }
       });
 
@@ -106,12 +181,27 @@
       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'],
+               backgroundColor:  [
+                  "#f8cc1b90",
+                  "#fa7a4890",
+                  "#31195590",
+                  "#84a2cd90",
+                  "#bed05790",
+                  "#4777cd90",
+                  "#ffa5c890"],
+               pointBackgroundColor: [
+                  "#f8cc1b90",
+                  "#fa7a4890",
+                  "#31195590",
+                  "#84a2cd90",
+                  "#bed05790",
+                  "#4777cd90",
+                  "#ffa5c890"],
                borderColor: ['black'],
                borderWidth: 1,
                pointRadius: 6,
             }];
+      chartId.options.plugins.title.text = videotitle;
       chartId.update();
 
    };