Updated leaflet.js with chart.js

479a5dff · Rushikesh Padsala · 5ed52e19 · 479a5dff · 479a5dff
Commit 479a5dff authored 2 years ago by Rushikesh Padsala
Hide whitespace changes
Inline Side-by-side

Showing

with 82 additions and 5 deletions
+82 -5
--- a/public/leaflet-stoeckach-heatdemand/index.css
+++ b/public/leaflet-stoeckach-heatdemand/index.css
-#mapid { height: 100%; }
\ No newline at end of file
+#mapid { height: 100%; }
--- 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>