From 479a5dffedc05e94de04794e548a4a53a5d285c1 Mon Sep 17 00:00:00 2001
From: Rushikesh Padsala <rushikesh.padsala@hft-stuttgart.de>
Date: Mon, 29 May 2023 14:35:52 +0000
Subject: [PATCH] Updated leaflet.js with chart.js
---
public/leaflet-stoeckach-heatdemand/index.css | 2 +-
.../leaflet-stoeckach-heatdemand/index.html | 85 ++++++++++++++++++-
2 files changed, 82 insertions(+), 5 deletions(-)
diff --git a/public/leaflet-stoeckach-heatdemand/index.css b/public/leaflet-stoeckach-heatdemand/index.css
index 4e673e7..4a30511 100644
--- a/public/leaflet-stoeckach-heatdemand/index.css
+++ b/public/leaflet-stoeckach-heatdemand/index.css
@@ -1 +1 @@
-#mapid { height: 100%; }
\ No newline at end of file
+#mapid { height: 100%; }
diff --git a/public/leaflet-stoeckach-heatdemand/index.html b/public/leaflet-stoeckach-heatdemand/index.html
index 0180ddf..dc0ae5e 100644
--- a/public/leaflet-stoeckach-heatdemand/index.html
+++ b/public/leaflet-stoeckach-heatdemand/index.html
@@ -10,10 +10,30 @@
crossorigin="">
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
- crossorigin=""></script>
-
- <script src="building_data.js"></script>
+ crossorigin=""></script>
+<script src="building_data.js"></script>
+<script src="building_data.js"></script>
<link rel="stylesheet" href="index.css">
+ <style>
+ body {
+ display: flex;
+ flex-direction: row;
+ margin: 0;
+ padding: 0;
+ }
+ #map-container {
+ flex: 1;
+ height: 100vh;
+ }
+ #chart-container {
+ flex: 1;
+ padding: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ </style>
+
</head>
<body>
@@ -67,6 +87,63 @@
onEachFeature: onEachFeature,
style: style,
}).addTo(mymap);
+
+ // Retrieve the building year of construction data from the GeoJSON
+var buildingYoc = building_data.features.map(function(feature) {
+ return feature.properties.Year_of_co;
+});
+
+// Count the occurrences of each building age
+var yocCounts = {};
+buildingYoc.forEach(function(Year_of_co) {
+ if (yocCounts[Year_of_co]) {
+ yocCounts[Year_of_co]++;
+ } else {
+ yocCounts[Year_of_co] = 1;
+ }
+});
+
+// Prepare the chart data
+var yocLabels = Object.keys(yocCounts);
+var yocData = Object.values(yocCounts);
+
+// Create the building year of construction distribution chart using Chart.js
+var ctx = document.getElementById('yocChart').getContext('2d');
+var yocChart = new Chart(ctx, {
+ type: 'bar',
+ data: {
+ labels: yocLabels,
+ datasets: [{
+ label: 'No. of buildings',
+ data: yocData,
+ backgroundColor: 'rgba(75, 192, 192, 0.5)',
+ borderColor: 'rgba(75, 192, 192, 1)',
+
+ borderWidth: 1
+ }]
+ },
+ options: {
+ responsive: true,
+ plugins: {
+ legend: {
+ position: 'bottom',
+ },
+ title: {
+ display: true,
+ text: 'Building Distribution According to its Year of Construction'
+ }
+ },
+ scales: {
+ y: {
+ beginAtZero: true,
+ stepSize: 15
+ }
+ }
+
+ }
+
+});
+
</script>
@@ -75,4 +152,4 @@
</body>
-</html>
\ No newline at end of file
+</html>
--
GitLab