highchart

This commit is contained in:
Walter Hupfeld 2023-10-10 11:37:55 +02:00
parent a98f0769bc
commit 77aa04a01c
2 changed files with 59 additions and 6 deletions

View File

@ -44,6 +44,7 @@
<script src="../js/jquery.min.js"></script> <script src="../js/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.13.6/js/jquery.dataTables.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> <style>
.rechts {text-align:right;background-color:#eee;} .rechts {text-align:right;background-color:#eee;}
.l {border-left: 1px solid black; } .l {border-left: 1px solid black; }
@ -84,6 +85,8 @@
<div class="container" style="margin-top:4em;"> <div class="container" style="margin-top:4em;">
<h1>Fahrradunfälle in <?=$strName?></h2> <h1>Fahrradunfälle in <?=$strName?></h2>
Einwohnerzahl:<?=$numPopulation?>&nbsp;&nbsp; Fläche:<?=$numFlaeche?> km<sup>2</sup> Einwohnerzahl:<?=$numPopulation?>&nbsp;&nbsp; Fläche:<?=$numFlaeche?> km<sup>2</sup>
<!-- Unfallzahlen -->
<h2>Unfallzahlen</h2> <h2>Unfallzahlen</h2>
<div class="row"> <div class="row">
<div class="col-5"> <div class="col-5">
@ -98,18 +101,17 @@
?> ?>
<tr><th>Gesamt</th><td><strong><?=$numGesamt?></strong></td></tr> <tr><th>Gesamt</th><td><strong><?=$numGesamt?></strong></td></tr>
</table> </table>
</div> <table class="table table-sm">
</div>
<div class="row">
<div class="col-5">
<table class="table table-sm">
<tr><th>Quote pro Tausend Einwohner</th><td><?= round($numGesamt/$numPopulation*1000,2) ?></td></tr> <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> <tr><th>Quote pro Fläche</th><td><?= round($numGesamt/$numFlaeche,1) ?> /km<sup>2</sup></td></tr>
</table> </table>
</div> </div>
<div class="col-6">
<div id="c_unfallzahlen"></div>
</div>
</div> </div>
<!-- Unfallbeteilgte -->
<div class="row"> <div class="row">
<div class="col-5"> <div class="col-5">
<h4>Unfallbeteiligte</h4> <h4>Unfallbeteiligte</h4>
@ -138,6 +140,7 @@
</div> </div>
</div> </div>
<!-- Unfallarten -->
<div class="row"> <div class="row">
<div class="col-5"> <div class="col-5">
<h4>Unfallart</h4> <h4>Unfallart</h4>
@ -151,4 +154,45 @@
</div> </div>
</div> </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> </html>

View File

@ -53,3 +53,12 @@ function get_unfallart($numYear,$strLocation){
return $arrResult; return $arrResult;
} }
function get_series($arrData,$arrBezeichnung){
$result="[";
foreach ($arrData as $row) {
$result.= "{ name: '".$arrBezeichnung[$row['UKATEGORIE']] ."', y: ".$row['anz']."},";
}
$result.="]";
return $result;
}