better graphs

web/templates/partials/graph.html.php

@@ -0,0 +1,73 @@
+<?php
+    /*
+    usage: 
+    
+    partial('graph.html.php', [
+        'id' => 'graph1',
+        'title' => 'Graph 1',
+        'gclass' => '', // classes for the graph div
+        'legend' => ['Geschwindigkeit', 'Fehler', 'Verweigerungen', 'Zeit', 'Geschwindigkeit', 'Punkte', 'Platz'],
+        'xaxis' => ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
+        'seriesdata' => [
+            ['name' => 'Geschwindigkeit', 'type'=>'line','stack'=>'Total', 'data' => [120, 132, 101, 134, 90, 230, 210]],
+            ['name' => 'Fehler', 'type'=>'line','stack'=>'Total', 'data' => [220, 182, 191, 234, 290, 330, 310]],
+            ['name' => 'Verweigerungen', 'type'=>'line','stack'=>'Total', 'data' => [150, 232, 201, 154, 190, 330, 410]],
+            ['name' => 'Zeit', 'type'=>'line','stack'=>'Total', 'data' => [320, 332, 301, 334, 390, 330, 320]],
+            ['name' => 'Punkte', 'type'=>'line','stack'=>'Total', 'data' => [820, 932, 901, 934, 1290, 1330, 1320]],
+            ['name' => 'Platz', 'type'=>'line','stack'=>'Total', 'data' => [820, 932, 901, 934, 1290, 1330, 1320]]
+        ],
+    ])
+    */
+
+?>
+
+<div id="graph<?= $id ?>" data-bs-theme="light" class="card bg-light text-black <?= $gclass ?>" style="min-height: 200px;"></div>
+
+<script type="text/javascript">
+    // Initialize the echarts instance based on the prepared dom
+    var myChart<?= $id ?> = echarts.init(document.getElementById('graph<?= $id ?>'));
+
+    // Specify the configuration items and data for the chart
+    var option = {
+        title: {
+            text: '<?= $title ?>'
+        },
+        tooltip: {
+            trigger: 'axis'
+        },
+        <?php if(isset($legend)): ?>
+        legend: {
+            data: <?= json_encode($legend); ?>
+        },
+        <?php endif; ?>
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+        },
+        toolbox: {
+            feature: {
+                saveAsImage: {}
+            }
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: <?= json_encode($xaxis); ?>
+        },
+        yAxis: {
+            type: 'value'
+        },
+        series: <?= json_encode($seriesdata, JSON_PRETTY_PRINT); ?>
+    };
+
+    // Display the chart using the configuration items and data just specified.
+    myChart<?= $id ?>.setOption(option);
+
+    window.addEventListener('resize', function(event) {
+        if(myChart<?= $id ?> != null && myChart<?= $id ?> != undefined){
+            myChart<?= $id ?>.resize();
+        }
+    }, true);
+</script>