highchart

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>

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;
+}
+