Add sample for flotr lib

2020-10-17 14:06:58 +02:00 · 2020-10-17 14:06:58 +02:00 · 9d348f3e48
commit 9d348f3e48
parent dd9d11e81d
2 changed files with 82 additions and 0 deletions
--- a/uebung/js/flotr2.min.js
+++ b/uebung/js/flotr2.min.js
--- a/uebung/kap2/index.html
+++ b/uebung/kap2/index.html
@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>GVI - Notenverteilung</title>
+</head>
+
+<body>
+
+<div id="chart" style="width:600px; height:400px;"></div>
+
+<script src="../js/flotr2.min.js"></script>
+<script>
+
+    window.onload = function() {
+
+        let notenverteilung = [
+            [0, 1], [1, 1], [2, 3], [3, 3], [4, 1], [5, 3],
+            [6, 5], [7, 4], [8, 4], [9, 8], [10, 2], [11, 3]
+        ]
+
+        let notenTicks = [
+            [0, "1,0"], [1, "1,3"], [2, "1,7"], [3, "2,0"], [4, "2,3"], [5, "2,7"],
+            [6, "3,0"], [7, "3,3"], [8, "3,7"], [9, "4,0"], [10, "4,7"], [11, "5,0"],
+        ]
+
+        let options = {
+            title: "Notenverteilung",
+            colors: ["#89afd2"],
+            bars: {
+                show: true,
+                barWidth: 0.5,
+                shadowSize: 0,
+                fillOpacity: 1,
+                lineWidth: 0,
+            },
+            yaxis: {
+                min: 0,
+                tickDecimals: 0,
+            },
+            xaxis: {
+                ticks: notenTicks,
+            },
+            grid: {
+                horizontalLines: false,
+                verticalLines: false,
+            }
+        }
+
+        Flotr.draw(document.getElementById("chart"), [notenverteilung], options)
+    }
+
+</script>
+</body>
+</html>