Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
UGL
website
Commits
479a5dff
Commit
479a5dff
authored
May 29, 2023
by
Rushikesh Padsala
Browse files
Updated leaflet.js with chart.js
parent
5ed52e19
Pipeline
#7515
passed with stage
in 18 seconds
Changes
2
Pipelines
1
Show whitespace changes
Inline
Side-by-side
public/leaflet-stoeckach-heatdemand/index.css
View file @
479a5dff
public/leaflet-stoeckach-heatdemand/index.html
View file @
479a5dff
...
...
@@ -11,9 +11,29 @@
<script
src=
"https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity=
"sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=
""
></script>
<script
src=
"building_data.js"
></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>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment