Tulpdiagramm
<div class="mb-3">
<canvas id="rkas"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('rkas');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['2014','2015','2016','2017','2018','2019','2020','2021','2022','2023','2024'],
datasets: [{
label: 'Müüdud vara',
data: [3.5, 7.2, 6.9, 8.3, 7.0, 17.0, 8.1, 13.0, 8.0, 12.0, 0],
borderWidth: 1,
borderColor: '#0000c4',
backgroundColor: '#0000c4'
},
{
label: 'Müügi eesmärk',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 21.0],
borderWidth: 1,
borderColor: '#0000c4',
backgroundColor: '#c4ffff'
}
]
},
options: {
scales: {
x: {
stacked: true,
},
y: {
stacked: true
}
}
}
});
</script>
Tulpdiagramm mitme postiga
<div class="mb-3">
<canvas id="tegevusala"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx2 = document.getElementById('tegevusala');
new Chart(ctx2, {
type: 'bar',
data: {
labels: ['2021 I kv','2021 II kv','2021 III kv','2021 IV kv','2022 I kv','2022 II kv','2022 III kv','2022 IV kv','2023 I kv','2023 II kv','2023 III kv','2023 IV kv','2024 I kv','2024 II kv'],
datasets: [{
label: 'Kõik tegevusalad',
data: [1158, 1199, 1200, 1270, 1240, 1354, 1349, 1429, 1424, 1524, 1500, 1578, 1553, 1641],
borderWidth: 1,
borderColor: '#0000c4',
backgroundColor: '#0000c4'
},
{
label: 'Rajatiste ehitus',
data: [1377, 1491, 1582, 1663, 1474, 1622, 1750, 1815, 1653, 1846, 1911, 1999, 1735, 1878],
borderWidth: 1,
borderColor: '#0000c4',
backgroundColor: '#c4ffff'
},
{
label: 'Eriehitustööd',
data: [951, 990, 1034, 1062, 1013, 1125, 1167, 1177, 1133, 1192, 1200, 1238, 1194, 1258],
borderWidth: 1,
borderColor: '#0000c4',
backgroundColor: '#e4e4e4'
},
{
label: 'Hoonete ehitus',
data: [951, 981, 1020, 1059, 1000, 1134, 1157, 1167, 1122, 1168, 1176, 1202, 1175, 1221],
borderWidth: 1,
borderColor: '#0000c4',
backgroundColor: '#ffffff'
}
]
},
options: {
scales: {
x: {
stacked: false,
},
y: {
stacked: false,
}
}
}
});
</script>
Tulpdiagramm pikali postide, nähtavate numbrite ja fikseeritud kõrgusega
<div class="chart-container mb-3" style="position: relative; height:600px">
<canvas id="maakonnad"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<script>
const ctx6 = document.getElementById('maakonnad');
new Chart(ctx6, {
plugins: [ChartDataLabels],
type: 'bar',
data: {
labels: ['Võru maakond', 'Hiiu maakond', 'Lääne maakond', 'Pärnu maakond', 'Ida-Viru maakond', 'Valga maakond', 'Saare maakond', 'Põlva maakond', 'Lääne-Viru maakond', 'Jõgeva maakond', 'Viljandi maakond', 'Tartu maakond', 'Harju maakond, v.a Tallinn', 'Tallinn', 'Harju maakond', 'Rapla maakond', 'Järva maakond'],
datasets: [{
label: 'II kv 2023',
data: [936, 1048, 1057, 1065, 901, 900, 988, 1028, 1041, 1070, 997, 1103, 1200, 1147, 1167, 1101, 1251],
borderWidth: 1,
borderColor: '#0000c4',
backgroundColor: '#c4ffff'
},
{
label: 'II kv 2024',
data: [877, 953, 997, 1002, 1041, 1044, 1047, 1088, 1098, 1104, 1104, 1127, 1198, 1200, 1200, 1250, 1360],
borderWidth: 1,
borderColor: '#0000c4',
backgroundColor: '#0000c4'
}
]
},
options: {
maintainAspectRatio: false,
plugins: {
datalabels: {
anchor: 'end',
align: 'end',
offset: 4,
}
},
responsive: true,
indexAxis: 'y',
scales: {
x: {
stacked: false,
},
y: {
stacked: false,
}
}
}
});
</script>
Joondiagramm
Kood
Google Mapsi embed
<div class="ratio ratio-16x9 mb-3">
<iframe src="https://www.google.com/maps/embed?pb=!4v1723464205852!6m8!1m7!1sz02ne78hPYuMhr7tPrujKw!2m2!1d59.44039017903117!2d24.73180968897423!3f133.2171482683519!4f10.076939728535677!5f0.7820865974627469" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
Sõõrikdiagramm
<h2 class="mb-3 font-family-atlas-grotesk">Kristiine keskuse ostnud ettevõtte osanikud</h2>
<div class="chart-container mb-3" style="position: relative; height:600px">
<canvas id="osalused"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<script>
const ctx7 = document.getElementById('osalused');
new Chart(ctx7, {
plugins: [ChartDataLabels],
type: 'doughnut',
data: {
labels: ['Taavet Hinrikus','Toonart Rääsk','Anders Anderson','Ivar Vendelin','Eften Real Estate Fund 5','Kristjan Rahu','Priit Koit','Viljar Arkas','Tõnu Uustalu'],
datasets: [{
label: 'Osalus (%)',
data: [17.09, 17.09, 17.09, 17.09, 11.24, 10.03, 10.03, 0.16, 0.16],
borderWidth: 1,
borderColor: '#0000c4',
backgroundColor: '#c4ffff'
}
]
},
options: {
maintainAspectRatio: false,
plugins: {
datalabels: {
anchor: 'end',
align: 'end',
offset: 4,
}
},
responsive: true,
}
});
</script>