verlaufsgrafik

statistics/gemeinde_detail.php

@@ -1,12 +1,12 @@
 <?php
     require_once("../config.php");
     require_once("../lib/attributes.php");
-    require_once("include.php");
+    require_once("functions.php");
     $numLand=5; // NRW
     $numRegbez=(isset($_GET['regbez'])) ? (int)$_GET['regbez'] : 1;
     $numKreis=(isset($_GET['kreis'])) ? (int)$_GET['kreis'] : 1;
     $numGemeinde=(isset($_GET['gemeinde'])) ? (int)$_GET['gemeinde'] : 1;
-    $numJahr=2022;
+    $numJahr=$numLatestYear;
 
     // Name, Population und Fläche der Gemeinde
     $result= $db->prepare("SELECT * FROM community WHERE ULAND=:land AND UREGBEZ=:regbez AND UKREIS=:kreis AND UGEMEINDE=:gemeinde");
@@ -29,6 +29,7 @@
     $resultUnfallart = get_unfallart($numJahr,$strLocation);
     $resultUnfalltyp = get_unfalltyp($numJahr,$strLocation);
     $resultBeteiligte = get_beteiligte($numJahr,$strLocation);
+    $resultVerlauf = get_verlauf($strLocation);
     $numGesamt=0;
 
 ?>
@@ -40,11 +41,8 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Fahrrad-Unfallstatistik NRW</title>
         <link rel="stylesheet" href="../css/bootstrap.min.css"/>
-        <link rel="stylesheet" href="//cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
-
         <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>
+        <script src="../js/highcharts.js"></script>
         <style>
             .rechts {text-align:right;background-color:#eee;}
             .l {border-left: 1px solid black; }
@@ -83,13 +81,30 @@
 
    
     <div class="container" style="margin-top:4em;">  
-   <h1>Fahrradunfälle in <?=$strName?></h2>
-   Einwohnerzahl:<?=$numPopulation?>&nbsp;&nbsp;  Fläche:<?=$numFlaeche?> km<sup>2</sup>
+   <h1>Fahrradunfälle <?=$numJahr?> in <?=$strName?></h2>
+   <p>Einwohnerzahl: <?=$numPopulation?>&nbsp;&nbsp;  Fläche: <?=$numFlaeche?> km<sup>2</sup></p>
+
+   <!-- Unfallverlauf -->
+   <div class="row">
+        <div class="col-5">
+            <h4>Unfallverlauf von <?=$numStartYear?> bis <?=$numLatestYear?> </h4>
+            <table class='table table-sm'>
+                <tr><th></th><th>2022</th><th>2021</th><th>2020</th><th>2019</th></tr>
+                <tr><td><?= $arrCategory[1]?></td><?= get_row($resultVerlauf,1) ?></tr>
+                <tr><td><?= $arrCategory[2]?></td><?= get_row($resultVerlauf,2) ?></tr>
+                <tr><td><?= $arrCategory[3]?></td><?= get_row($resultVerlauf,3) ?></tr>
+                <tr><th>Gesamt</th><?= get_row($resultVerlauf,0) ?></tr>
+            </table> 
+        </div>
+        <div class="col-7">
+            <div id="c_unfallverlauf"></div>
+        </div>
+    </div>
 
    <!-- Unfallzahlen        -->
-   <h2>Unfallzahlen</h2>
     <div class="row">
-        <div class="col-5">
+        <div class="col-5">  
+            <h4>Unfallzahlen</h4>
             <table class="table table-sm">
                 <?php
                  //DEBUG echo "<pre>"; print_r($resultUnfallzahlen);echo "</pre>";
@@ -163,7 +178,6 @@
         </div>
     </div>
 </div>
-<?= get_series_beteiligte($resultBeteiligte,$arrBeteiligte) ?>
 </body>
 <script>
 
@@ -312,5 +326,52 @@ Highcharts.chart('c_unfallbeteiligte', {
         data: <?= get_series_beteiligte($resultBeteiligte,$arrBeteiligte) ?>
     }]
 });
+
+Highcharts.chart('c_unfallverlauf', {
+    chart: {
+        type: 'column'
+    },
+    title: {
+        text: 'Verlauf der Fahrradunfälle',
+        align: 'center'
+    },
+    xAxis: {
+        categories: ['2022','2021','2020','2019']
+    },
+    yAxis: {
+        min: 0,
+        title: {
+            text: 'Jahr'
+        },
+        stackLabels: {
+            enabled: true
+        }
+    },
+    legend: {
+        align: 'left',
+        x: 100,
+        verticalAlign: 'top',
+        y: 30,
+        floating: true,
+        backgroundColor:
+            Highcharts.defaultOptions.legend.backgroundColor || 'white',
+        borderColor: '#CCC',
+        borderWidth: 1,
+        shadow: false
+    },
+    tooltip: {
+        headerFormat: '<b>{point.x}</b><br/>',
+        pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
+    },
+    plotOptions: {
+        column: {
+            stacking: 'normal',
+            dataLabels: {
+                enabled: true
+            }
+        }
+    },
+    series: <?=get_series_verlauf($resultVerlauf,$arrCategory)?>
+});
 </script>
 </html>