First site with radar plot via chart.js

2023-01-26 14:48:41 +01:00 · 2023-01-26 14:48:41 +01:00 · 3403adc4bf
parent 38eb0cdbf5
commit 3403adc4bf
2 changed files with 44 additions and 0 deletions
--- a/main.html
+++ b/main.html
@ -0,0 +1,40 @@
+
+<!DOCTYPE>
+<html>
+<head>
+   <meta charset- "UTF-8" />
+   <meta name="viewport" content="width=device-width, initial-scale=1" />
+   <title>chart.js</title>
+</head>
+<body>
+   <h1>Video lectures taxonomy</h1>
+   <canvas id="chartId" aria-label="chart" height="350" width="580"></canvas>
+   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
+   <script>
+      var chrt = document.getElementById("chartId").getContext("2d");
+      var chartId = new Chart(chrt, {
+         type: 'radar',
+         data: {
+            labels: ["HTML", "CSS", "JAVASCRIPT", "CHART.JS", "JQUERY", "BOOTSTRP"],
+            datasets: [{
+               label: "online tutorial subjects",
+               data: [20, 40, 33, 35, 30, 38],
+               backgroundColor: ['lightgrey'],
+               pointBackgroundColor: ['yellow', 'aqua', 'pink', 'lightgreen', 'lightblue', 'gold'],
+               borderColor: ['black'],
+               borderWidth: 1,
+               pointRadius: 6,
+            }],
+         },
+         options: {
+            responsive: false,
+            elements: {
+               line: {
+                  borderWidth: 3
+               }
+            }
+         },
+      });
+   </script>
+</body>
+</html>
--- a/videoTax.kdev4
+++ b/videoTax.kdev4
@ -0,0 +1,4 @@
+[Project]
+CreatedFrom=
+Manager=KDevGenericManager
+Name=videoTax