From 77aa04a01cea6329c4cbb9df552fade373f4eb3c Mon Sep 17 00:00:00 2001
From: Walter Hupfeld <Walter.Hupfeld@gmx.de>
Date: Tue, 10 Oct 2023 11:37:55 +0200
Subject: [PATCH] highchart

---
 statistics/gemeinde_detail.php | 56 ++++++++++++++++++++++++++++++----
 statistics/include.php         |  9 ++++++
 2 files changed, 59 insertions(+), 6 deletions(-)

diff --git a/statistics/gemeinde_detail.php b/statistics/gemeinde_detail.php
index e97a3ef..76e5d47 100644
--- a/statistics/gemeinde_detail.php
+++ b/statistics/gemeinde_detail.php
@@ -44,6 +44,7 @@
 
         <script src="../js/jquery.min.js"></script>
         <script src="//cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
+        <script src="https://code.highcharts.com/highcharts.js"></script>
         <style>
             .rechts {text-align:right;background-color:#eee;}
             .l {border-left: 1px solid black; }
@@ -84,6 +85,8 @@
     <div class="container" style="margin-top:4em;">  
    <h1>Fahrradunfälle in <?=$strName?></h2>
    Einwohnerzahl:<?=$numPopulation?>&nbsp;&nbsp;  Fläche:<?=$numFlaeche?> km<sup>2</sup>
+
+   <!-- Unfallzahlen        -->
    <h2>Unfallzahlen</h2>
     <div class="row">
         <div class="col-5">
@@ -98,18 +101,17 @@
                     ?>
                     <tr><th>Gesamt</th><td><strong><?=$numGesamt?></strong></td></tr>
                 </table>
-        </div>
-    </div>
-
-    <div class="row">
-        <div class="col-5">
-            <table class="table table-sm">
+                <table class="table table-sm">
                     <tr><th>Quote pro Tausend Einwohner</th><td><?= round($numGesamt/$numPopulation*1000,2) ?></td></tr>
                     <tr><th>Quote pro Fläche</th><td><?= round($numGesamt/$numFlaeche,1) ?> /km<sup>2</sup></td></tr>
                 </table>
         </div>
+        <div class="col-6">
+            <div id="c_unfallzahlen"></div>
+        </div>
     </div>
 
+    <!-- Unfallbeteilgte -->
     <div class="row">
         <div class="col-5">
             <h4>Unfallbeteiligte</h4>
@@ -138,6 +140,7 @@
         </div>
     </div>
 
+    <!-- Unfallarten  -->
     <div class="row">
         <div class="col-5">
             <h4>Unfallart</h4>
@@ -151,4 +154,45 @@
         </div>
     </div>
 </div>
+<?= get_series($resultUnfallzahlen,$arrCategory) ?>
+</body>
+<script>
+
+Highcharts.chart('c_unfallzahlen', {
+    chart: {
+        plotBackgroundColor: null,
+        plotBorderWidth: null,
+        plotShadow: false,
+        type: 'pie'
+    },
+    title: {
+        text: 'Unfallzahlen',
+        align: 'left'
+    },
+    tooltip: {
+        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
+    },
+    accessibility: {
+        point: {
+            valueSuffix: '%'
+        }
+    },
+    plotOptions: {
+        pie: {
+            allowPointSelect: true,
+            cursor: 'pointer',
+            dataLabels: {
+                enabled: true,
+                format: '<b>{point.name}</b>: {point.percentage:.1f} %'
+            }
+        }
+    },
+    series: [{
+        name: 'Unfallzahlen',
+        colorByPoint: true,
+        data: <?= get_series($resultUnfallzahlen,$arrCategory) ?>
+    }]
+});
+
+</script>
 </html>
\ No newline at end of file
diff --git a/statistics/include.php b/statistics/include.php
index 4f629ec..4e0cffb 100644
--- a/statistics/include.php
+++ b/statistics/include.php
@@ -53,3 +53,12 @@ function get_unfallart($numYear,$strLocation){
     return $arrResult;
 }
 
+function get_series($arrData,$arrBezeichnung){
+    $result="[";
+    foreach ($arrData as $row) {
+        $result.= "{ name: '".$arrBezeichnung[$row['UKATEGORIE']] ."', y: ".$row['anz']."},"; 
+    }
+    $result.="]";
+    return $result;
+}
+