xref: /webtrees/resources/views/statistics/other/charts/geo.phtml (revision 88de55fda5bcccfc1527a19eaa4a245e17861255)
1<?php
2declare(strict_types=1);
3
4$id = 'google-chart-' . bin2hex(random_bytes(8));
5?>
6
7<?= view('statistics/other/chart-setup') ?>
8
9<h4 class="border-bottom p-2 mb-4">
10    <?= $chart_title ?>
11</h4>
12
13<div class="mb-3">
14    <div class="card-deck">
15        <div class="col-12 mb-3">
16            <div class="card m-0">
17                <div class="card-body">
18                    <div id="google_charts" class="text-center">
19                        <div id="<?= $id ?>"></div>
20                    </div>
21                </div>
22            </div>
23        </div>
24    </div>
25</div>
26
27<script>
28
29var callbackGeoChart = function () {
30    google.charts.setOnLoadCallback(drawRegionsMap);
31
32    function drawRegionsMap () {
33        var data = google.visualization.arrayToDataTable(
34            <?= json_encode($data) ?>
35        );
36
37        var options = {
38            title: '<?= $chart_title ?>',
39            region: '<?= $region ?>',
40            height: '100%',
41            width: '100%',
42            colorAxis: {
43                colors: [
44                    '#<?= $chart_color3 ?>',
45                    '#<?= $chart_color2 ?>'
46                ]
47            }
48        };
49
50        var chart = new google.visualization.GeoChart(document.getElementById('<?= $id ?>'));
51
52        chart.draw(data, options);
53    }
54
55    $(window).resize(drawRegionsMap);
56};
57
58if (
59    document.readyState === "complete" ||
60    (document.readyState !== "loading" && !document.documentElement.doScroll)
61) {
62    callbackGeoChart();
63} else {
64    document.addEventListener("DOMContentLoaded", callbackGeoChart);
65}
66
67</script>
68